我正在學習 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它時，會嚴重改變視圖。為什么？