How to make flex items wrap until container's height is reached, then shrink on further window resizing?

I'm working on a layout using CSS flexbox and facing an issue where I want my flex items to behave in a specific way when the browser window is resized:

1. Desired Behaviour:

   • When the window width decreases, the flex items should wrap until their combined height reaches the container's height.

   • Once the container's height is reached, the items should stop wrapping and start shrinking instead.

2. Current Issue:
   Right now, the items continue wrapping and overflow the parent container's height.

Here is an example code showcasing my issue: Link to Flems.io

.container {  font-family: arial, sans-serif;  margin: 0;  padding: 0;  list-style-type: none;  border: 2px dashed red;  display: flex;  align-items: flex-start;  height: 120px;  flex-wrap: wrap;}.flex {  background: #6ab6d8;  padding: 10px;  border: 3px solid #2e86bb;  color: white;  font-size: 20px;  text-align: center;  width: 400px;  flex: 0 1 auto;  min-width: 0;}.flex2 {  width: 300px;}

<ul class="container"><li class="flex flex1">1: some flex item</li><li class="flex flex2">2: some flex item</li><li class="flex flex3">3: some flex item</li><li class="flex flex4">4: some flex item</li><li class="flex flex5">5: some flex item</li></ul>

I tried adding min-width: 0 to the flex items because I learned that flexbox sets min-width to auto by default, unlike other block-level elements where min-width is typically 0. However, this change didn’t solve the problem.