title: How do I set a flex-item's height to the same height as it's sibling
body: <p>I am trying to set the red flex-item's content height to the height of the blue flex-item when the blue flex-item's height is greater.</p>
  
  <p>The height needs to be set for the scroll bar to work. How do I set the height to be the same as the blue flex-item?</p>
  
  <p>I want the red flex-item's height to be 100% of the page. The nearest I can get to the result I am looking for is by setting the height of the div inside the red flex-item to 100vh.</p>
  
  <p>When the content in the blue flex-item is less than the red flex-item I have the desired result but when the content inside the blue flex-item is greater the problem occurs.</p>
  
  <p>The obvious answer seems to be to set the height of the parent class container but it needs to be 100% so the blue flex-item can grow.</p>
  
  <pre><code>.container {
    display: flex;
    border: 1px solid gray;
  }
  
  .menu {
    border: 1px solid red;
    flex-grow: 1;
  }
  
  .menu-content {
    width: 200px;
    height: 100vh;
    overflow-y: auto;
  }
  
  .content {
    border: 1px solid blue;
    align-self: flex-start;
    height: 100%;
    overflow: hidden;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mattdtomo/zqsxwn59/" rel="nofollow noreferrer">https://jsfiddle.net/mattdtomo/zqsxwn59/</a></p>