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

添加

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; }.wrapper {  height: 100%;  overflow-y: auto;}.content {  display: flex;  flex-direction: row;  clear: both;}<button>Resize</button><div >  <div >    <label>Some heading that wont scroll</label>  </div>  <div >    <div >      <div >        content      </div>      <div >        content      </div>      <div >        content      </div>      <div >        content      </div>      <div >        content      </div>      <div >        content      </div>      <div >        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