容器无法占满全部水平空间的问题排查与修复

我有一个单列基础布局，包含两个section：第一个为纯文本区块，第二个是表格。当表格宽度超出窗口宽度、页面出现横向滚动条时，文本区块右侧会出现空白，容器无法占满可用空间。

原始代码 #

CSS 代码

.container {
  background-color: lightred;
}

.first-section {
  border: 2px solid steelblue;
  width: 100%;
}

.second-section {
  border: 2px solid tomato;
  width: 100%;
}

/* TABLE */
table {
}

thead {
  background-color: black;
  color: white;
}

tbody, tr, td {
  border: 1px solid black;
}

.cell-first-column {
  width: 200px;
  height: 70px;  
}

.cell, th {
  width: 100px;
  height: 70px;
}

.td-cell {
  height: 70px;
  border: 1px solid black;
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0
}

.chart-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gold;
}

.cell-text {
  z-index: 10;
}

HTML 代码

<div class="container">
  <div class="first-section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit mi, tristique nec pharetra hendrerit, egestas id elit. Proin suscipit sapien urna, id tempus ipsum consectetur ut. Praesent at consequat nisl, at pretium risus. Mauris varius hendrerit semper. Maecenas erat erat, congue id semper dictum, dignissim sed dui. Suspendisse pellentesque lorem quis tellus elementum, non fermentum diam consequat. In aliquet justo et faucibus malesuada. Nunc vestibulum nibh non justo tristique, sit amet sollicitudin neque volutpat. Curabitur elementum, neque vitae blandit luctus, augue nisi sollicitudin lectus, sed fringilla turpis sapien quis ex. Aliquam mattis vel est consequat pretium. Etiam eleifend in mauris ut pharetra. Integer eget leo dolor. Aliquam tellus ligula, hendrerit eu sem eget, scelerisque eleifend quam. Suspendisse potenti.
Curabitur pellentesque lacus nulla, eu pharetra orci cursus non. In commodo justo nec facilisis ultricies. Maecenas vel tincidunt neque, pretium auctor tellus. Morbi ornare diam malesuada imperdiet tempor. Suspendisse faucibus diam dictum, consectetur turpis sed, ullamcorper ante. Vivamus imperdiet tincidunt nulla vel blandit. Proin dictum tortor sapien, id ullamcorper nisl fermentum sed. Pellentesque vestibulum placerat nisl quis sodales. Nunc ultricies mauris porta sollicitudin vulputate. Sed non quam velit. Morbi est diam, lobortis at eleifend sed, porttitor quis ipsum. Quisque eu auctor libero.
  </div>
  
  <div class="second-section">
    <table cellpadding="0">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
          <th>Number</th>
          <th>Color</th>
        </tr>
      </thead>

      <tr>
        <td><div class="cell-first-column">Alfreds Futterkiste</div></td>
        <td><div class="cell">Maria Anders</div></td>
        <td><div class="cell">Germany</div></td>
        <td><div class="cell">1234567</div></td>
        <td><div class="cell">red</div></td>
      </tr>
      <tr>
        <td><div class="cell-first-column">Centro comercial</div></td>
        <td><div class="cell">Francisco Chang</div></td>
        <td><div class="cell">Mexico</div></td>
        <td><div class="cell">1234567</div></td>
        <td><div class="cell">blue</div></td>
      </tr>

      <tr>
        <td><div class="cell-first-column">Opla</div></td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 90%"></div>
            <div class="cell-text">Charles Boule</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 30%"></div>
            <div class="cell-text">France</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 50%"></div>
            <div class="cell-text">1234567</div>
          </div>
        </td>
        <td class="td-cell">
          <div class="chart">
            <div class="chart-inner" style="height: 70%"></div>
            <div class="cell-text">yellow</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

问题根源在于：文本区块设置的width: 100%仅基于初始视口宽度计算，当表格触发横向滚动后，页面实际可用宽度包含了滚动区域，但文本区块并未随之扩展。以下两种方法均可解决：

方法一：让容器自适应最宽元素宽度 #

修改.container的CSS规则，添加min-width: fit-content：

.container {
  background-color: lightcoral; /* 修正：lightred不是合法CSS颜色值 */
  min-width: fit-content;
}

该设置会让容器自动适应内部最宽元素（即表格）的宽度，确保文本区块能跟随容器扩展到完整的可用空间。

方法二：让文本区块自适应宽度 #

修改.first-section的CSS规则，替换原width: 100%为以下属性：

.first-section {
  border: 2px solid steelblue;
  width: fit-content;
  min-width: 100%;
}

这个设置让文本区块默认占满视口宽度，当表格宽度超过视口时，文本区块会自动扩展到与表格一致的宽度，避免右侧出现空白。

额外提示：原代码中的lightred不是有效的CSS颜色值，建议替换为lightcoral、pink等合法颜色，否则容器背景色无法正常显示。

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