html - Flex box - overflow issue when warp

Question

Let's me try to explain the issue.

Assume we have 2 flex box boxOrange and boxPurpule who share the full width of a container and stretch to the height of this one. Due to their min-width of 400px, these flex box warp in 'column' on small screen (demonstration in Example 1).

If one of the box contain too much content, the box is scrollable (like boxOrange in the demonstration of Example 2).

The issue is when their is scrollable content on small screen. I would like the boxOrange keep 50% height of container when it warp. As you can see in Exemple 2, the content of boxOrange, isn't scrollable and overflow the container.

Do you know how to fix that ?

Example 1 - Available on codepen.io

#container {
  background-color: red;
  padding: 10px;
  width: 80%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#boxOrange {
  background-color: orange;
  flex: 1;
  min-width: 400px;
  overflow: scroll;
}
#boxPurple {
  background-color: purple;
  flex: 1;
  min-width: 400px;
}

<div id=container>

  <div id="boxOrange">

  </div>

  <div id="boxPurple">
  </div>

</div>

Answer 1

If you give the boxOrange a max-height: 50% it will scroll instead of grow

#container {
  background-color: red;
  padding: 10px;
  width: 80%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#boxOrange {
  background-color: orange;
  flex: 1;
  min-width: 400px;
  overflow: auto;
}
#boxPurple {
  background-color: purple;
  flex: 1;
  min-width: 400px;
}

@media screen and (max-width: 1050px) {
  #boxOrange {
    max-height: 50%;
  }
  #boxPurple {
    height: 50%;
  }
}

<div id=container>
  <div id="boxOrange">
   CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
    - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT - CONTENT
  </div>

  <div id="boxPurple">
  </div>
</div>