html - 防止 flex PARENT 无溢出地增长 : hidden

Question

关于如何防止 flex child 生长的信息太多，但很难找出如何防止 flex PARENT 生长(因为 child)。

考虑以下布局:

• 外部元素的高度和宽度是固定的(可能用于原生应用)
• 页眉和页脚既不增长也不收缩。此外，页脚始终位于底部。
• 主要内容(在页眉和页脚之间)占据所有可用空间。
• 主要内容没有滚动。
  • 但是内部元素可以滚动。例如部分标题下方的 ScrollView :

初步解决方案:

.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 用于 ScrollView 。

它有效。但是有一个问题:如果我们添加一些带有阴影的元素(例如卡片 ScrollView )，因为 overflow-y: hidden for .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”并为 .splitView 和 -section 添加“height: 100%”。

.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