在 HTML 部分添加水平滚动条

Question

我正在学习 vue js 并希望在其中有两个部分的地方显示一个灵活的显示。第一部分离屏3格，固定不可滚动，分为4个垂直部分。第二部分取剩下的 9 个网格，它们垂直分为 4 个部分，每个部分都可以通过动态按钮填充。当显示的按钮超过该部分的宽度时，会出现一个滚动条，影响第二部分。图像我想要构建的内容：https://drive.google.com/open?id=1pek5x1yadgy7v0KV7BjM7NLNYONP0EkJ我所做的是这样的：.listDevice {  background-color: darkorange;  height: 140px;  overflow: hidden;  overflow-x: scroll;}.data {  overflow-x: scroll;  display: flex;}<div class="row">  <div class="col col-lg-3">    <div class="text-secondary text-center">      <div class="text center">        <h4 class="name">          xxxxxx        </h4>      </div>      <div class="text center">        <h4 class="name">          xxxxxx        </h4>      </div>      <div class="text center">        <h4 class="name">          xxxxxx        </h4>      </div>      <div class="text center">        <h4 class="name">          xxxxxx        </h4>      </div>    </div>  </div>  <div class=" col col-lg-9 data">    <div class="listDevice">      <button>AA</button>      <button>AA</button>      <button>AA</button>      <button>AA</button>      <button>AA</button>      <button>AA</button>    </div>    <div class="listDevice">    </div>    <div class="listDevice">    </div>    <div class="listDevice">    </div>  </div></div>当我添加display: flex它时，会严重改变视图。为什么？

Answer 1

.listDevice {

background-color: darkorange;

height: 140px;

overflow: hidden;

overflow-x: auto;

display: flex;

flex-wrap: wrap;

flex-direction: column;

width:160px

}

.listDevice button {

height: 30px;

width: 40px;

}

.data {

  overflow-x: scroll;

  display: flex;

}

<div class="row">

  <div class="col col-lg-3">

    <div class="text-secondary text-center">

      <div class="text center">

        <h4 class="name">

          xxxxxx

        </h4>

      </div>

      <div class="text center">

        <h4 class="name">

          xxxxxx

        </h4>

      </div>

      <div class="text center">

        <h4 class="name">

          xxxxxx

        </h4>

      </div>

      <div class="text center">

        <h4 class="name">

          xxxxxx

        </h4>

      </div>

    </div>

  </div>

  <div class=" col col-lg-9 data">

    <div class="listDevice">

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

      <button>AA</button>

    </div>

    

  </div>

</div>

Answer 2

删除溢出：隐藏在您的 CSS 中。