如何让Flex容器中的Footer随溢出同级元素拉伸至满宽？

问题重现 #

在垂直方向的Flex容器中，当同级的Table元素宽度超出容器设定宽度时，Footer元素无法跟随容器的滚动宽度适配，依然只占初始设定的容器宽度。

原代码示例：

CSS #

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #000;
  width: 200px;
  height: 100px;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  background-color: blue;
}

HTML #

<div class="container">
  <table>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>
  <div class="footer">
    <button>
      Load more
    </button>
  </div>
</div>

解决思路及修改方案 #

问题根源在于：设置了固定width:200px的Flex容器，其横向滚动时的可视宽度仍为200px，Footer的width:100%只会参照这个可视宽度，而非容器内容的实际宽度。

修改方案：将容器的固定宽度改为最小宽度+自适应宽度，让容器宽度能跟随内容自动扩展，同时保留最小宽度限制：

修改后的CSS：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #000;
  min-width: 200px; /* 保留最小宽度限制 */
  width: fit-content; /* 让容器宽度适配内容宽度 */
  height: 100px;
  overflow: auto;
}

.footer {
  display: flex;
  justify-content: center;
  width: 100%; /* 此时会占满容器的实际宽度 */
  background-color: blue;
}

或者用等价写法，通过width: auto配合min-width实现：

.container {
  /* 其他属性不变 */
  min-width: 200px;
  width: auto;
}

修改后，容器会根据Table的宽度自动调整自身宽度（至少200px），Footer的width:100%会对应容器的实际宽度，横向滚动时Footer将完全跟随容器宽度适配。

内容的提问来源于stack exchange，提问作者Washington Guedes