Flexbox CSS Overflow Div Content is Expanding Div-CodePudding

I am working on styling an app. I have made a mock layout here: https://codepen.io/Sean713/pen/VwdgMEx?editors=1100

My code will also be pasted at the bottom.

Everything works the way I want it to, except for the fact that when the green div has too much content (you can uncomment the p tags), it increases the size of all the divs. I don't want those divs to change in size, rather I just want the content in the green div to compress to a scrollable section, how can I fix this?

 <ul>
   <li><a>Solve</a></li>
   <li><a>About</a></li>
   <li><a>Other</a></li>
</ul>

<div >
  
  <div >
    <div >
      This is the top left half
    </div>
    <div >
      This is the top right half
    </div>
  </div>
  
  <div >
    <div >
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
<!--       <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p>
      <p>I can scroll</p> -->

    </div>
  </div>
  
</div>

body {
  margin: 0;
  padding: 10px;
  background-color: white;
  
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.yellow {
  background-color: yellow;
  padding: 10px;
  
  flex: 1; /* should occupy the entire screen except the navbar */
  display: flex; /* should create flex for blue and red */
  flex-direction: column;
}

.blue {
  background-color: blue;
  flex: 2; /* should take up 2/3rds of yellow */
  display: flex; /* should create flex for the top left and top right halves */
  min-height: 240px;
  padding: 10px;
}

.red {
  background-color: red;
  padding: 15px;
  
  flex: 1; /* should take up 1/3rd of yellow */
  display: flex; /* should create flex for green, so that green can expand to fill it */
  flex-direction: column;
  min-height: 120px;
  
}

.green {
  background-color: green;
  overflow: scroll;
  
  flex: 1; /* should fill the entire red */
}

.darkgrey {
  background-color: darkgrey;
  flex: 1; /* will fill half the width of blue */
}

.lightgrey {
  background-color: lightgrey;
  flex: 1; /* will fill half the width of blue */
}

/*  navbar stuff */
ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  box-sizing: border-box;
}

/*  navbar stuff */
li a {
  display: block;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
}

CodePudding user response：

Display: flex;

<div >

1 2 3`enter code here`

CodePudding user response：

First, Remove flex from yellow and red div. It doesn't make sense.
Set fix height on green div and use overflow:auto to make scrollable.

CodePudding user response：

.green{
overflow:auto
}

if you specify sizes, it'll show scrolls