html - 水平可滚动容器内的 flexbox 宽度

Question

我正在尝试为虚拟表创建布局。
虚拟表将放置在 .table-body 中元素。
每个表格单元格具有与 .table-header 中的单元格相同的 flex 布局样式。所以使用相同的父元素，它们看起来是一样的。
问题是 .table-cell元素不拉伸(stretch) .table-header宽度和 .table-header元素不拉伸(stretch) .table-container宽度。
我正在尝试获取 .table-cell 's 给出 .table-header 的宽度和 .table-container .和 .table-body将占用 .table-container 中的剩余空间
这里是 Codesandbox 和玩。

.table-wrapper {
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  background: rgba(255, 255, 0, 0.2);
}

.table-container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  
  /* If you uncomment next line, you see what I'm trying to achieve */
  /* min-width: 1100px; */
  
  background: rgba(0, 255, 0, 0.3);
}

.table-header {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  flex: 0 0 auto;
  
  background: rgba(255, 100, 0, 0.3);
}

.table-cell {
  min-width: 100px;
  display: flex;
  flex: 1 1 auto;
  height: 30px;
  line-height: 30px;
  
  border: 1px solid blue;
}

.table-body {
  display: flex;
  flex: 1 1 auto;
  
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.3);
}

<div class="table-wrapper">
  <div class="table-container">
    <div class="table-header">
      <div class="table-cell" style="flex: 0 0 180px;">header-cell 1</div>
      <div class="table-cell">header-cell 2</div>
      <div class="table-cell">header-cell 3</div>
      <div class="table-cell">header-cell 4</div>
      <div class="table-cell" style="flex: 0 0 200px;">header-cell 5</div>
      <div class="table-cell">header-cell 6</div>
      <div class="table-cell">header-cell 7</div>
    </div>
    <div class="table-body">virtual table here</div>
  </div>
</div>

Answer 1

考虑使用 inline-flex而不是 flex并使用 width 定义宽度而不是 flex-basis

.table-wrapper {
  width: 500px;
  height: 300px;
  overflow-x: scroll;
  background: rgba(255, 255, 0, 0.2);
}

.table-container {
  display: inline-flex; /* UPDATED */
  flex-flow: column nowrap;
  min-width: 100%; /* UPDATED */
  height: 100%;
  background: rgba(0, 255, 0, 0.3);
}

.table-header {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  flex: 0 0 auto;
  
  background: rgba(255, 100, 0, 0.3);
}

.table-cell {
  min-width: 100px;
  display: flex;
  flex: 1 1 auto;
  height: 30px;
  line-height: 30px;
  
  border: 1px solid blue;
}

.table-body {
  display: flex;
  flex: 1 1 auto;
  
  border: 1px solid red;
  background: rgba(255, 0, 0, 0.3);
}

<div class="table-wrapper">
  <div class="table-container">
    <div class="table-header">
      <div class="table-cell" style="flex: 0 0 180px;width:180px;">header-cell 1</div>
      <div class="table-cell">header-cell 2</div>
      <div class="table-cell">header-cell 3</div>
      <div class="table-cell">header-cell 4</div>
      <div class="table-cell" style="flex: 0 0 200px;width:200px;">header-cell 5</div>
      <div class="table-cell">header-cell 6</div>
      <div class="table-cell">header-cell 7</div>
    </div>
    <div class="table-body">virtual table here</div>
  </div>
</div>