溢出-x 滾動在移動設備上無法正常工作

Question

https://codesandbox.io/s/frosty-water-fintki

正如您在附加的沙箱中看到的那樣，我有一個可滾動的 div，其中 6 個項目排列成 2 行。

但是，當您切換到移動視圖（在沙箱 url 輸入附近切換響應式視圖按鈕）時，它開始垂直滾動。

我注意到，如果您刪除flex-wrap它可以正常工作，但我需要它來制作 2 行。

如何在移動設備和台式機上獲得相同的行為？

Answer 1

當您必須考慮二維時，CSS 網格將使您更容易（恕我直言）控制布局。

這是一個使用元素大小的簡單示例。

 .wrapper { display: grid; width: 100vw; grid-template-columns: repeat(3, 1fr); gap: 14px; } .button-item { background-color: red; width: 170px; height: 146px; border-radius: 27px; display: flex; justify-content: center; align-items: center; margin: 0 auto; }

 <div class="wrapper"> <div class="button-item">1</div> <div class="button-item">2</div> <div class="button-item">3</div> <div class="button-item">4</div> <div class="button-item">5</div> <div class="button-item">6</div> </div>

Answer 2

問題是您在此類中添加了顯示無。

.wrapper::-webkit-scrollbar {
  display: none;
}

在對這個類發表評論后，6 個項目出現正確。

Answer 3

如果將row類添加到.css文件中，每行將有 3 個元素：

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="wrapper">
        <div className="row">
          <div className="button-item">1</div>
          <div className="button-item">2</div>
          <div className="button-item">3</div>
        </div>
        <div className="row">
          <div className="button-item">4</div>
          <div className="button-item">5</div>
          <div className="button-item">6</div>
        </div>
      </div>
    </div>
  );
}

並將其添加到您的.css ：

.wrapper {
  overflow-x: scroll;
  max-height: 300px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.row {
  display: flex;
}