防止flex PARENT增长而不溢出：hidden

Question

关于如何防止 Flex Child 增长的信息太多，但很难找到如何防止 Flex PARENT 增长（因为孩子）。

考虑下面的布局：

• 外部元素的高度和宽度是固定的（适用于本机应用程序）
• 页眉和页脚既不增长也不缩小。此外，页脚始终位于底部。
• 主要内容（页眉和页脚之间）占用所有可用空间。
• 主要内容不滚动。
  • 但内部元素可以滚动。例如 部分标题下方的滚动视图：

初步解决方案：

.layout {
  display: flex;
  flex-direction: column;
  width: 640px;
  height: 300px;
  background: rgba(220, 20, 60, 0.2);
}

.header {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: rgba(220, 20, 60, 0.2);
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 4px 8px;
  background: rgba(255, 69, 0, 0.2);
  overflow-y: hidden;
}

.title {
  flex: 0 0 auto;
  background: rgba(255, 255, 0, 0.2);
}

.splitView {
  display: flex;
  flex: 1 1 auto;
  background: rgba(0, 128, 128, 0.2);
  overflow-y: hidden;
}

.splitView-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
}

.splitView-section:first-child {
  background: rgba(0, 191, 255, 0.2);
}

.splitView-section:last-child {
  background: rgba(0, 0, 255, 0.2);
}

.scrollView {
  flex: 1 1 auto;
  background: rgba(165, 42, 42, 0.2);
  overflow-y: auto;
}

.veryBigElement {
  background: #CD5C5C;
  width: 50px;
  height: 500px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px
}

.footer {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: rgba(173, 255, 47, 0.2);
}

<div class="layout">
  <div class="header">I am header</div>
  <div class="content">
    <div class="title">Title</div>
    <div class="splitView">
      <div class="splitView-section">
        <div class="sectionTitle">Section title</div>
        <div class="scrollView">
          <div class="veryBigElement"></div>
        </div>
      </div>
      <div class="splitView-section"></div>
    </div>
  </div>
  <div class="footer">I am footer</div>
</div>

• 外部元素的高度和宽度是固定的：例如，让它固定width: 640px。height: 300px;
• 页眉和页脚不增长也不缩小。 flex: 0 0 auto用于页眉和页脚。
• 主要内容（页眉和页脚之间）占用所有可用空间。 flex: 1 1 auto。
• 此外，页脚始终位于底部。页脚不需要，margin-top: auto因为它被主要内容压到底部。
• 主要内容不滚动。默认情况下不会。
• 但内部元素可以滚动。 overflow-y: auto用于滚动视图。

有用。但是有一个问题：如果我们添加一些带有阴影的元素（例如滚动视图的卡片），由于overflow-y: hiddenfor.splitView和.content，我们将看不到它的一部分。例如 如果添加box-shadow: rgba(black, 0.25) 0 0 6pxfor .veryBigElement，我们只会看到：

因此，根据设计，可以不使用上述解决方案。如果我们去掉overflow-y: hidden和.splitView，.content则不管到splitView-section，都会增长。overflow-y: auto.scrollView

请不要这样：

• 我们既不知道页眉的高度也不知道页脚的高度（假设它的内容是动态的）。
• 我们无法计算.scrollView的高度，甚至splitView无法计算 的高度：在实际应用中它可能是很多内容而不是“.title”。

JSFiddle： https: //jsfiddle.net/teyqkrh8/

Answer 1

您可以删除“overflow-y：hidden”并将“height：100％”添加到.splitView和-section。

.splitView{
    display: flex
    flex: 1 1 auto
    background: rgba(#008080, 0.2)
    height: 100%
    &-section{  
        display: flex
        flex-direction: column
        flex: 1 1 50%
        height: 100%
    }
}

由于父 div 的高度已设置，因此子 div 将继承该高度。

https://codepen.io/salixdubois/pen/JQLaRE