Flexbox调整大小和可滚动溢出[重复]答案

【问题标题】：Flexbox resize and scrollable overflow [duplicate]Flexbox调整大小和可滚动溢出[重复]
【发布时间】：2019-08-13 16:07:32
【问题描述】：

我有要调整大小的内容，并且我想要一个固定的标题，它不会增长/缩小并且不属于可滚动内容的一部分。如果没有足够的空间，下面的内容可以滚动。

内容外包装 (flexGrowWrapper) 具有 flex-grow: 1，而内包装具有 height: 100%; overflow-y: auto。这里的思考过程是flexGrowWrapper 将填充resize div 中的任何剩余空间，然后内部包装器将占据flexGrowWrapper 的全部高度，如果有溢出，它应该滚动。

发生的情况是flexGrowWrapper 确实增长到填充resize 区域，但似乎它的内容决定了它的最小高度。

如何让flexGrowWrapper 永远不会超出resize 区域高度？

$("button").click(function() {
	$(".resize").toggleClass("small");
});

.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}

<button>
Resize
</button>
<div class="resize">
  <div class="heading">
  <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
 Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意：我查看了this similar question，但它似乎有一些差异，我无法找到适合我的解决方案。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将min-height: 0 添加到.flexGrowWrapper - 请参见下面的演示：

$("button").click(function() {
  $(".resize").toggleClass("small");
});

.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
  min-height: 0; /* ADDED */
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}

<button>
Resize
</button>
<div class="resize">
  <div class="heading">
    <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
  Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

为什么会这样

请注意，这是因为对于 column flexbox，默认的 min-height 值是 auto（沿着 flex 轴）。您可以在下面看到这种行为的一些示例：

【讨论】：