html - mdn - flex超出容器



Flexbox调整大小和可滚动溢出 (1)

这个问题在这里已有答案:

我有内容我正在调整大小,我希望有一个不会增长/缩小的固定标题,而不是可滚动内容的一部分。 如果没有足够的空间,下面的内容可以滚动。

内容外包装器( flexGrowWrapper )具有 flex-grow: 1 ,内包装器具有 height: 100%; overflow-y: auto 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>

注意:我看了 这个类似的问题 ,但似乎有一些差异,我无法让解决方案适合我。


添加 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>

为什么会这样

请注意,这是因为对于 列flexbox ,默认的 min-height 值是 auto (沿着 flex轴 )。 您可以在下面看到此行为的一些示例:





flexbox