Html 使具有FLEX父项的溢出自动的子元素收缩

.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>