为什么忽略flex-basis？

Question

在以下情况下，为什么<header>的高度减少了？ 据我所知， <header>应保留flex-basis声明的高度， <div class="content-wrapper">应占用剩余空间。 这确实有效，直到它包含的内容高于可用空间。 在这种情况下， <header>部分崩溃。

  main { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; } header { flex-basis: 50px; background: red; } .content-wrapper { background: blue; flex: 2; overflow-y: auto; } .content { height: 1000px; background: green; } 

 <main> <header></header> <div class="content-wrapper"> <div class="content"></div> </div> </main> 

如果您运行整个片段并更改高度，则标题高度会相对于屏幕高度发生变化。 我希望它能保持固定在50px。

Answer 1

@Eric Martinez的评论是正确的。 要防止元素收缩，请将flex-shrink设置为0。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  main { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; } header { height: 50px; flex-shrink: 0; background: red; } .content-wrapper { background: blue; flex: 2; overflow-y: auto; } .content { height: 1000px; background: green; } 

 <main> <header></header> <div class="content-wrapper"> <div class="content"></div> </div> </main>