Html 具有动态大小子容器的CSS滚动

我有一个用子元素动态填充的容器。单个子元素的宽度属性是从后端%中检索的，总计为100%。这是因为理想的效果是，孩子们保持大小比例相比较

.wrapper{
显示器：flex；
宽度：100%；
}
.项目{
溢出：隐藏；
高度：20px；
}

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

您可以在

.wrapper

上使用

flex wrap:wrapp

，这样，当子项无法适应父项的宽度时，它们只需转到另一行即可。这样，它们可以很容易地水平放置，但它们将垂直拉伸。

.wrapper{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.项目{
溢出：隐藏；
高度：20px；
}

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

多亏@Michael\u B对这个问题的回答，我成功地解决了这个问题

我将html更改为：

<div class="wrapper">
  <div class="item" style="flex: 0 0 30%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="flex: 0 0 15%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="flex: 0 0 5%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="flex: 0 0 40%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="flex: 0 0 10%">Lorem ipsum dolor sit amet</div>
</div>

---

请注意，左侧的内容溢出有一个问题，因此您无法滚动到它。这就是为什么需要证明内容的合理性。我找到了解决方案。

问题是，无论发生什么情况，我的所有子项的宽度加起来都是100%，因此这与您提供的代码所针对的情况不同。无论如何，谢谢你的主意！

.wrapper {
  display: flex;
  width: 100%;
  overflow-x: auto;
  justify-content: flex-start;
}