How to Make My Flexbox Layout Take 100% Vertical Space

body{margin:0}

<div style="height: 100vh; display: flex; flex-direction: column;">
   <div>
      This is some fixed heighted content
   </div>
   <div style="flex:1;overflow:auto;">
      A lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the div
   </div>
</div>

Have flexbox fill up vertical space of browser for sidemenu

With your initial code sample, all you need is to also give .container a height.

.container, .wrapper, html, body {    height:100%;    margin:0;}
.wrapper {    display: flex;    flex-direction: column;}
.row3 {    background-color: green;    flex:2;    display: flex;}

<div class="container">    <div class="wrapper">        <div class="row3">Option One</div>        <div class="row3">Option Two</div>        <div class="row3">Option Three</div>    </div></div>

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>