Make child element with overflow auto of flex parent shrink

Issue

I have the following Layout:

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

.cotnainer {
}

.long-content {
}

.content {
  overflow-y: auto;
}

<div class="wrapper">
  <div class="container long-content">
    <div class="header">Some Header</div>
    <p class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <p>
  </div>
  <div class="container">
    Some content
  </div>
  <div class="container">
    Some content
  </div>
</div>

How can I make the .content Element with overflow-y: auto shrink without a set height so that all .container Elements are within the flex parent?

Solution

You can set the min-height=0 on the long-content container to allow it to shrink over its content height. However, It might make more sense to set overflow on long-content and add position: sticky; to the header.

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  width: 200px;
  height: 200px;
}

.container {}

.long-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
}

.content {
  overflow-y: auto
}

<div class="wrapper">
  <div class="container long-content">
    <div class="header">Some Header</div>
    <p class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="container">
    Some content
  </div>
  <div class="container">
    Some content
  </div>
</div>

Answered By - SyndRain