<分区>
<分区>
我需要一个 div 来拥有 display: flex、flex-direction: column 和 flex: 1 .但由于某种原因，该 div 的内容被调整了大小。
使用 display: block 不会调整内容的大小。
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 2em;
background: blue;
}
main {
background: yellow;
flex: 1;
overflow-y: auto;
/* Why display: flex resizes the articles */
display: flex;
flex-direction: column;
/* If you use display: block its working (uncomment to test)*/
/* display: block; */
}
article {
height: 15em;
border: 1px solid black;
margin: 1em;
}
footer {
background: green;
height: 3em;
} <body>
<header></header>
<main>
<article></article>
<article></article>
<article></article>
</main>
<footer></footer>
</body>
最佳答案
请在您的 CSS 中添加以下代码:
article {
flex-shrink: 0;
}
关于html - 在 flex grow 容器中使用 flex 方向列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54021470/