Why don't flex items shrink past content size?

Let’s assume having the following HTML:

<div class="main">
  <div class="header">Header</div>
  <div class="middle">
    <div class="inner">
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
    </div>
  </div>
</div>

Let’s assume having the following CSS:

.main {
  border: 1px solid blue;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: red;
}

.middle {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inner {
  flex: 1;
  overflow-y: auto;
}

How to achieve that the .inner element actually scrolls?

Note, that everything is working as expected with this structure:

<div class="main">
    <div class="inner">
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
    </div>
</div>

Introducing an additional nesting level does not work anymore, see:

<div class="main">
  <div class="middle">
    <div class="inner">
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
      <p>Lorem Ipsum</p>
    </div>
  </div>
</div>

Setting max-height to .middle would be a solution for this problem, but as soon as the element .header is added this can’t be used. It would use to much space.

Any idea how this can be achieved? I somehow struggle with the understanding how an element can be restrained in height without using height: 100% or max-height: 100%. I always thought flexbox can be used for this. Am I wrong?

Any help appreciated.

You need to sign in to view this answers

Related Post