容器滚动时子元素无法随滚动宽度拉伸的问题排查

我有一个设置了overflow: auto的container容器div，当子元素包含长文本时会溢出容器并显示横向滚动条，这一表现符合预期。但存在的问题是，子元素无法随容器的滚动宽度拉伸，滚动容器时子元素会呈现截断状态。

原有代码 #

CSS #

.flex-col {
  flex-direction: column;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

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

.item.selected {
  background-color: green;
  color: red;
}

.item {
  white-space: nowrap;
}

HTML #

<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">1Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">2Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">3Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
  </div>
</div>

解决方案 #

问题根源在于.container是块级元素，其内部的.item默认只会继承容器的可视宽度，不会跟随滚动内容的总宽度。只需给.container添加flex列布局，让子元素自动拉伸至内容总宽度：

修改.container的CSS：

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

设置后，每个.item都会自适应容器的滚动宽度，滚动时背景色和元素整体不会再出现截断情况。

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