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

问题描述 投票:2回答:1

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

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

内容外包装(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 css3 flexbox
1个回答
0
投票

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轴)。您可以在下面看到此行为的一些示例:

© www.soinside.com 2019 - 2024. All rights reserved.