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

Question

我有正在调整大小的内容，并且我希望有一个不会增加/缩小并且不属于可滚动内容的固定标题。如果没有足够的空间，则下面的内容可滚动。

内容外部包装器（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>

注意：我看了这个类似的问题，但是似乎有一些区别，我无法找到适合我的解决方案。

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

为什么这样

请注意，这是因为对于 列flexbox ，默认min-height值为auto（沿 flex axis
）。