html - 为什么 flex 元素可以在固定位置的 flex 容器中占据全高，除非该元素具有显示 : flex applied?

Question

我有如下标记:

<div id="red">
    <div id="yellow">
        alot of text
    </div>
</div>
<div id="blue">
</div>

我不能让黄色占据红色的 100% 高度，即使红色溢出，它也只占据窗口的 100%。如果我将红色的 display 设置为 block，它会起作用，但我需要 flex...

#red {
  position: fixed;
  height: 100%;
  overflow-y: scroll;
  width: 100px;
  background-color: red;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
}

#yellow {
  display: flex;
  flex-grow: 1;
  background-color: yellow;
}

#blue {
  background-color: blue;
}

Answer 1

为什么不将溢出应用到黄色而不是红色？

#red {
  position: fixed;
  height: 100vh;
  width: 100px;
  background-color: red;
  display: flex;
  flex-direction: column;
}

#yellow {
  display: flex;
  overflow-y: scroll;
  background-color: yellow;
}

#blue {
  background-color: blue;
}

body {
  margin: 0;
}

<div id="red">
  <div id="yellow">
    Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum
    et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula
    aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut
    risus. Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing.
  </div>
</div>
<div id="blue"></div>

这里有一个链接可能会有所帮助:

• Make child element use 100% of total OVERFLOW height of parent