CSS - flex 增加高度并启用溢出

Question

问题：无法在 flex grow child 上启用溢出。

例子：

• Div 1 flex 增长到内容。
• Div 2 flex 增长以填充可用
• Div 2.1 位于 Div 2 内并且更高，所以我想启用溢出，但它一直在增长并超出身体高度。
• Div 3 flex 增长到内容

如何让 div 2.1 增长到 div 2 的大小，同时也启用溢出？

HTML

<div class="container">
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>
 </div>
 <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
        <p> "Fill parent" </p>
        <p> "Content" </p>        
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "This content should be in the overflow" </p>
    </div>
 </div>
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>      
 </div>    
</div>

CSS

.container {
    height: 500px;
    width: 500px;
    display: flex;
    flex-direction: column;
}
.flex-fitcontents {
    flex: 0 1 auto;
    background-color: blue;
}
.flex-fillremaining {
    position: relative;
    flex: 1 1 auto;
    background-color: red;
}
.flex-fillparent {
    flex: 1 1 auto;
    background-color: green;
    overflow: auto;
}

JS Fiddle

Answer 1

如果我理解正确，您的意思类似于以下示例。在flex-fillparent 中设置高度可以解决问题。

.container {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.flex-fitcontents {
  flex: 0 1 auto;
  background-color: blue;
}

.flex-fillremaining {
  position: relative;
  flex: 1 1 auto;
  background-color: red;
}

.flex-fillparent {
  flex: 1 1 auto;
  background-color: green;
  overflow: auto;
  height: 3rem;
}

<div class="container">
  <div class="flex-fitcontents">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend bibendum rutrum. Duis cursus eros eget ornare efficitur. Aliquam pellentesque, arcu sed euismod pulvinar, quam enim commodo est, sit amet tristique justo arcu non tortor.
      In nec dignissim tortor. Pellentesque nibh justo, suscipit ut tempor at, mollis vitae purus. Aenean sollicitudin scelerisque blandit. In hac habitasse platea dictumst. </p>
  </div>
  <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
      <p> "Fill parent" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "This content should be in the overflow" </p>
    </div>
  </div>
  <div class="flex-fitcontents">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend bibendum rutrum. Duis cursus eros eget ornare efficitur. Aliquam pellentesque, arcu sed euismod pulvinar, quam enim commodo est, sit amet tristique justo arcu non tortor.
      In nec dignissim tortor. Pellentesque nibh justo, suscipit ut tempor at, mollis vitae purus. Aenean sollicitudin scelerisque blandit. In hac habitasse platea dictumst. </p>
  </div>
</div>

Answer 2

您可以尝试将溢出自动添加到 flex-fillremaining 中，以便其子项具有滚动条。

.flex-fillremaining {
  position: relative;
  flex: 1 1 auto;
  background-color: red;
  overflow: auto;
}