在 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 {&nbsp; overflow-x: scroll;&nbsp; display: flex;}<div class="row">&nbsp; <div class="col col-lg-3">&nbsp; &nbsp; <div class="text-secondary text-center">&nbsp; &nbsp; &nbsp; <div class="text center">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xxxxxx&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="text center">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xxxxxx&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="text center">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xxxxxx&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="text center">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xxxxxx&nbsp; &nbsp; &nbsp; &nbsp; </h4>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class=" col col-lg-9 data">&nbsp; &nbsp; <div class="listDevice">&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; &nbsp; <button>AA</button>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; </div></div>

Answer 2

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