Question

有关如何防止弹性孩子成长的信息太多，但是很难找到如何防止弹性父母成长的原因（因为孩子）。

请考虑以下布局：

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

初始解决方案：

.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的{{1}}而添加了一些带有阴影的元素（例如，卡片用于滚动视图），我们将看不到它的一部分。例如如果为.content添加box-shadow: rgba(black, 0.25) 0 0 6px，我们将看到：

因此，根据设计，可能不使用上述解决方案。如果我们从.veryBigElement和overflow-y: hidden中删除.splitView，则.content的增长将与splitView-section的{{1}}无关。

请不要这样：

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

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

Answer 1

您可以删除“ overflow-y：隐藏”并将“高度：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 ”高度设置为500px，并且您希望主要内容不会滚动，则只能滚动内部元素。因此，您必须添加veryBigElement 父级的 MAX-HEIGHT 。如果您删除了溢出y：隐藏，则splitView-section不会增长。

防止flex PARENT增长而不会溢出：隐藏

3 个答案: