1

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/

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Matt
  • 55
  • 1
  • 11

1 Answers1

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This is exactly what I was looking for. Thank you! I never would have thought to set the height to 0. It seems like a bit of a hack. How did you know about this? – Matt Nov 16 '19 at 20:49
  • @Matt I already used that trick before https://stackoverflow.com/a/58488563/8620333. It was inspired from a previous trick I also used: https://stackoverflow.com/a/55041133/8620333 .. well, by doing a lot of CSS we discover tricks ;) – Temani Afif Nov 16 '19 at 21:07