css - flex 容器中溢出滚动元素的宽度为 100%

Question

因为一张图值一千字，我先给大家展示一下：

红色是我的 flex 容器，蓝色是一个固定宽度为 50px 的元素，绿色是一个 100% 宽度的部分，黄色是一个 100% 宽度和溢出滚动的列表，最后是紫色我的列表元素宽度是 100px 的固定宽度吗？

我希望绿色元素适合我的红色 flex 容器。我怎样才能做到这一点？

这是用于制作上面屏幕截图的代码框（它是在 React 中制作的，但 html 在里面App.js，css 在里面styles.css）： https ://codesandbox.io/s/rough-moon-0rsfc?file=/src/styles.css

标签： css

Answer 1

您可以添加overflow: hidden到绿色框以使其保持在其父级的范围内。

section {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: green;
    overflow-x: hidden;
}