我想要一个div元素中的项目的可滚动列表。我使用display：flex; flex-direction: column; overflow-y: auto div中的元素有一个固定的高度。作为元素的固定高度之和，我希望滚动条出现。相反，元素会缩小以适应。通过docs，这不是预期的。如果我使用min-height代替height，它会按预期工作，但在我看来，这并不是min-height和height的目的。Safari和Chrome显示了相同的行为。我有什么问题吗？这里是height设置为20的示例，总和为100，列表高度为80 pix，无滚动条：
<!DOCTYPE html>
<html>
<head>
<title>Overflow demonstration</title>
</head>
<body>
<div style="width: 100px; height: 70px; border: 2px solid black; display: flex; flex-direction: column; overflow-y: auto;">
<div style="height: 20px; background-color: red;"></div>
<div style="height: 20px; background-color: blue;"></div>
<div style="height: 20px; background-color: green;"></div>
<div style="height: 20px; background-color: yellow;"></div>
<div style="height: 20px; background-color: purple;"></div>
</div>
</body>
</html>这里同样的，现在我用min-height代替height：
<!DOCTYPE html>
<html>
<head>
<title>Overflow demonstration</title>
</head>
<body>
<div style="width: 100px; height: 70px; border: 2px solid black; display: flex; flex-direction: column; overflow-y: auto;">
<div style="min-height: 20px; background-color: red;"></div>
<div style="min-height: 20px; background-color: blue;"></div>
<div style="min-height: 20px; background-color: green;"></div>
<div style="min-height: 20px; background-color: yellow;"></div>
<div style="min-height: 20px; background-color: purple;"></div>
</div>
</body>
</html>我不想在我的代码中把它作为一个特例。我或浏览器出了什么问题？
2条答案
按热度按时间qq24tv8q1#
尝试将
flex-shrink: 0;添加到所有子元素。因为Flex允许项目收缩以适应，在这个例子中，你不希望发生这种情况。
顺便说一句，你可以添加
flex-grow: 1;，这样如果容器太大，项目会自动增长以适应，如果你需要的话。e5nqia272#
这是因为flex属性会影响overflow属性的行为。当您在父元素上使用
display: flex时，子元素被视为flex项，其高度由flex容器决定（即父元素）。在您的示例中，子元素的高度固定为20px，该值小于父元素的高度（70px）。由于flex容器（即父元素）的高度大于其子元素的总高度，因此overflow-y: auto属性不起作用，滚动条也不会出现。如果要使用滚动条，请对所有子级使用最小高度或对所有子级使用
flex-shrink:0