html - 使 flexbox 网格在移动设备上具有水平滚动条

Question

我正在尝试弄清楚如何使表格具有底部水平滚动条。这是我的 HTML:

<div class="grid-block table">
  <div class="grid-block header"> 
    <div class="grid-block small-2 column"> 
      times 6
    </div>
  </div>
  <div class="grid-block row"> 
    <div class="grid-block small-2 column"> 
        times 6
    </div>
  </div>
</div>

我已经使用了这个 CSS，认为它可以解决我的问题。

.table {
    overflow: auto !important;
    width: 1400px !important;
}

我现在添加了重要内容，只是为了确保应用这些样式。

我还应该指出这里的每个元素都是一个 flex 元素。

干杯

Answer 1

此代码可能会帮助您入门。

.wrapper {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  font-size: 0;
}
.wrapper .child {
  font-size: 1rem;
  height: 50px;
  width: 60px;
  display: inline-block;
  background-color: cornflowerblue;
  text-align: center;
  border: 1px solid coral;
  margin-left: 10px;
}
.wrapper .child:first-child {
  margin-left: 0px;
}

<div class="wrapper">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
</div>