1

I have a flex element with fixed size, containing one flex item. This flex item have a child with overflow. I expected the overflow to be activated to allow flex item to fit into the flex element (because flex items can shrink by default). But It's not the case.

.wrapper {  
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: column;
} 
.pane { 
  overflow: auto; 
}
div {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.3);
  border: 1px solid
}
<div class="wrapper"> 
  <div class="body"> 
    <div class="pane"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula eget metus at maximus. Proin at nunc nibh. Curabitur elementum ipsum urna, ut rutrum justo consequat nec. Integer volutpat ornare nunc, ac pellentesque magna pharetra nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed turpis vitae dolor consequat elementum. Aenean in tempus nisi. Mauris varius finibus nunc, nec feugiat odio pharetra eget. Morbi maximus velit id tellus congue dignissim. Suspendisse potenti. Duis mattis ligula non purus dapibus, ac ornare urna tincidunt. Integer orci turpis, iaculis ac ornare a, dignissim sit amet libero. Cras libero risus, finibus tincidunt neque scelerisque, elementum tempus sapien. 
    </div>
  </div>
</div>

Here a sample https://codepen.io/anon/pen/zzvmNR?editors=1100

It's kind of easy to fix with a display flex in the .body class but I'm trying to understand why it's not working with the first attempt.

Can someone explain me what happen?

Thanks.

Manish Patel
  • 3,648
  • 1
  • 14
  • 22
Yoann Augen
  • 1,966
  • 3
  • 21
  • 39
  • In this particular case, because you're dealing with nested containers across multiple levels, applying `display: flex` to `.body` is the best solution IMO. – Michael Benjamin Jun 08 '17 at 13:57
  • The source of the problem is the *minimum size algorithm* on flex items. This default setting (`min-height: auto`) forces a flex item to never be smaller than its content. You need to override this rule with `min-height: 0` or `overflow: `. More details in the duplicate. – Michael Benjamin Jun 08 '17 at 14:00

1 Answers1

0

You need to set the height or max-height to the .pane in order to have scrollbar when content overflows.

itacode
  • 3,721
  • 3
  • 21
  • 23