Question

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

＆＃13;

 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;
 }

＆＃13;

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

＆＃13;

如果您运行整个代码段并更改高度，则标题高度会相对于屏幕高度发生变化。我希望它能保持固定在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>

为什么忽略flex-basis？

1 个答案: