0

I have a page with left and right sections within a parent container. Both sections can contain some small content that won't fill the full screen height or large content that would take more than screen height. I need the parent container to stretch based on left section's height but not it's right section. Right section should just fill the available space regardless of it's content. I was expecting that setting min-height: fit-content and max-height: -webkit-fill-available for left block will stretch it based on it's content if the content is large or will fill the parent if content is small and setting min-height: 0 and max-height: -webkit-fill-available for right block will stretch it to fill the parent regardless of it's content but instead the right block's height is still based on it's content and not on parent height.

Here is the full code

.root {
  background: #def;
  display: flex;
  min-height: 100vh;
}

.left {
  background: #fed;
  width: 40%;
  min-height: fit-content;
  max-height: -webkit-fill-available;
}

.right {
  background: #dfe;
  width: 60%;
  min-height: 0;
  max-height: -webkit-fill-available;
}
<!DOCTYPE html>
<html>

<body>
  <div class="root">
    <div class="left">
      this section should stretch parent height if it's content is large
    </div>

    <div class="right">
      this section should not stretch parent height, only fill what's available, regardless of it's content
    </div>
  </div>
</body>

</html>

Is there a way to make it work without JS, targeting latest Chrome, Safari and, if possible, FF?

Random
  • 3,807
  • 2
  • 30
  • 49
  • Would you expect that the right column would scroll if its content exceeded the parent height? – disinfor Feb 15 '21 at 18:56
  • @disinfor yes. actually it's a grid that could contain hundreds of rows, that's why it shouldn't expand the parent – Random Feb 15 '21 at 18:58

0 Answers0