防止 flex PARENT 在没有溢出的情况下增长：隐藏

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: hidden 对应于.splitView 和.content，我们将看不到它的一部分。例如。如果要为.veryBigElement 添加box-shadow: rgba(black, 0.25) 0 0 6px，我们只看到：

因此，根据设计，可能无法使用上述解决方案。如果我们从.splitView 和.content 中删除overflow-y: hidden，则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

Answer 2

我知道这是一个老问题，但无论如何都会对其他人有用。

由于您不想对外部容器应用一些填充或对阴影元素应用边距，您可以简单地为阴影元素赋予 z-index（大于任何外部元素 z-index（如果设置））属性元素，它将覆盖截止。

Answer 3

如果您将“veryBigElement”高度设为 500 像素，并且您希望主要内容不会滚动，则只有内部元素可以滚动。所以你必须添加veryBigElement parent的MAX-HEIGHT。如果去掉overflow-y: hidden 比splitView-section 不会增长。