在flex grow容器中使用flex direction列[重复]

Question

这个问题已经在这里有了答案：

• 为什么弹性商品仅限于父代尺寸？ 1个答案
• 如何防止div缩小，而其他人在flexbox中增长和缩小 1答案

我需要一个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> 

https://codepen.io/anon/pen/YdewKJ

Answer 1

请在您的CSS中添加以下代码：

article {
  flex-shrink: 0;
}