How do I set a flex-item's height to the same height as it's sibling

Question

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.

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?

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.

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.

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.

.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;
}

https://jsfiddle.net/mattdtomo/zqsxwn59/

Answer 1

You can consider min-height:100vh on the menu element to make sure it will cover the screen height and can grow with the blue content. Then use height:0;min-height:100%; for its content so it can fit without overflowing:

.container {
  display: flex;
}

.menu {
  border: 1px solid red;
  min-height: 100vh;
  width: 200px;
}

.menu-content {
  overflow-y: auto;
  height:0;
  min-height:100%;
}

.content {
  border: 1px solid blue;
  align-self: flex-start;
}

body {
  margin:0;
}
* {
  box-sizing:border-box;
}

<div class="container">
  <div class="menu">
    <div class="menu-content">
      Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu ContentMenu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu ContentMenu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content 
    </div>
  </div>
  <div class="content">
  Stretch Content Stretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content ch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Contentch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content ch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content
  </div>
</div>