html - Flexbox调整大小并滚动可溢出

This question already has an answer here:

Why don't flex items shrink past content size?
（1个答案）
8个月前关闭。
我有正在调整大小的内容，我希望有一个固定的标题，它不会增长/收缩，并且不是可滚动内容的一部分。如果没有足够的空间，下面的内容可以滚动。
内容外包装（flexGrowWrapper）具有flex-grow: 1，而内包装具有height: 100%; overflow-y: auto。这里的思想过程是flexGrowWrapper将填充resizediv中的任何剩余空间，然后内包装将取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，但它似乎有一些差异，我无法找到适合我的解决方案。

最佳答案

将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>

为什么这样做
请注意，这是因为对于列Flasbox来说，默认min-height值是（沿着Flex轴）。您可以在下面看到这种行为的一些示例：
Flexbox affects overflow-wrap behavior
Why don't flex items shrink past content size?