子元素溢出时无法拉伸至容器宽度的技术问题

问题出在.container是块级元素，默认宽度受父元素限制，内部的.item作为flex容器，即使包含超长文本，其宽度也会被限制在.container的当前宽度内，导致滚动时内容被截断。

修复方案 #

给.container添加display: flex; flex-direction: column;，让容器内部子元素能根据内容自动调整宽度，同时保留滚动和拉伸功能：

修改后的CSS：

.container {
  overflow: auto;
  resize: horizontal;
  min-width: 10rem;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
}

.item {
  white-space: nowrap;
}

原理说明 #

• 设置display: flex; flex-direction: column;后，.container成为flex容器，内部的.item会沿列方向排列，并且能根据自身内容宽度自动扩展，不会被容器初始宽度限制。
• 当容器被拉窄至小于内容宽度时，overflow: auto触发水平滚动，此时子元素的完整宽度会被容器滚动区域包含，滚动时就能看到全部内容。

如果需要让.item始终撑满容器宽度（即使内容较短），可以给.item添加align-self: stretch;，同时给文本容器添加flex: 1; overflow: hidden; text-overflow: ellipsis;处理短文本填充和超长文本省略（按需选择）。

修改后的完整代码：

<div class="flex flex-col h-full">
  <div class="h-full container">
    <div class="flex p-2 items-center item selected">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">这是一段非常长的测试文本，用来验证滚动时是否会被截断</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">text2</div>
    </div>
  </div>
</div>

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