Flexbox resize and scrollable overflow [duplicate]

Answer 1

Add min-height: 0 to .flexGrowWrapper - see demo below:

$("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;
}

Resize


  

    Some heading that wont scroll
  
  

    

      

        content
      
      

        content
      
      

        content
      
      

        content
      
      

        content
      
      

        content
      
      

        content
      
    
  


  Something else here

---

Why this works

Note that this is because for a column flexbox the default min-height value is auto (along the flex axis). You can see some examples of this behaviour below:

• Flexbox affects overflow-wrap behavior
• Why don't flex items shrink past content size?