html - 如何在不使用最小宽度或精确固定宽度的情况下使元素水平滚动？

Question

我正在尝试创建一个响应式表格，但是为了简单起见，我想让它在列太多时水平滚动。

.fixed-table-wrap {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.fixed-column {
  width: 140px;
}
.standard-column {
  width: calc(100% - 140px);
  overflow-x: auto;
}
.sc-content {
  display: flex;
  flex-wrap: wrap;
  min-width: 1485px;
  width: 100%;
}

<div class="fixed-table-wrap">
   <div class="fixed-column">
    <div class="fc-content">
    
    </div>
   </div>
   <div class="standard-column">
    <div class="sc-content">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
   </div>
</div>

为了获得滚动效果，我必须使用最小宽度或固定宽度，但我不希望这样，因为我希望表格能够响应，当它不超过窗口的宽度时，它应该是自然，当它超过时，它会滚动。

为了更好地了解我的问题是什么:

我的 table 是什么样子的:

更多我的 table 的样子:

当我删除最小宽度时会发生什么:

当我的最小宽度内容较少时会发生什么:

当我没有最小宽度的内容较少时会发生什么:

Answer 1

尝试使用 CSS overflow-x property并将您包裹在表格周围的元素设置为“滚动”。所以像这样使用 HTML:

<div id="table-wrapper">
  <table>
       <!-- table content here -->
  </table>
</div>

像这样的 CSS:

<style type="text/css">
#table-wrapper {
width: 100%;
x-overflow: scroll;
}
</style>