force div in layout to stop growing (css)-CodePudding

I have my div divided into two rows. The lower one should keep the size of its content and the upper one fill the rest. Up to here, we are good.

The upper one contains a flex layout (column) that should wrap. But instead of wrapping, it grows, making the whole thing get out of its container. You can click on the box to add new boxes in the demo I did. You will see new boxes are added to the upper section, and it does not wrap, instead, it all grows and the size of the maincontainer is broken.

The only solution I found is to fix the height of the containers. But in the real scenario, this is not possible.

document.getElementsByClassName('clickable')[0]
        .addEventListener('click', function (event) {
             var tag = document.createElement("div");
             var element = document.getElementById("upper");
             element.appendChild(tag);
        });
        
document.getElementsByClassName('clickableBottom')[0]
        .addEventListener('click', function (event) {
             var tag = document.createElement("div");
             var element = document.getElementById("lower");
             element.appendChild(tag);
        });

.maincontainer{
  background: gray;
  width: 400px;
  height: 300px;
  display: flex;
  flex-flow:column;
}

.upper{
  width:100%;
  flex-grow:1;
  border: 1px solid black;
  background:beige;
  display:flex;
  flex-flow:column;
  flex-wrap:wrap;
}

.upper div{
  width:40px;
  height:40px;
  background-color:orange;
  margin:10px;
}

.lower{
  width:100%;
  border:1px solid black;
  background:green;
  display:flex;
  flex-wrap:wrap;
}

.lower div{
  width:40px;
  height:40px;
  background-color:gray;
  margin:10px;
}

.clickable{
  border: 3px solid yellow
}

.clickableBottom{
  border: 3px solid orange;
}

<div >
  <div id="upper" >
    <div ></div>
  </div>
  <div id="lower" >
    <div ></div>
  </div>
</div>

CodePudding user response：

.upper {
width: 100%;
flex-grow: 1;
border: 1px solid black;
background: beige;
display: flex;
flex-flow: column;
flex-wrap: wrap;
overflow: auto;}

add this to your css