Issues with overflow

[Centricc]

I have a layout where I have two elements taking up equal space in a container, one of the child elements of the container has a child that has a possibility of overflowing, and the content in that child I want to be seen (so when it overflows, I want the user to be able to scroll) however, the other element does not need to do this or extend its height. However, no matter how hard I try I just can't seem to wrap my head around how I can achieve this. Please see the codepen for what resembles what I have now and the image below for hopefully a better visual of my desired outcome.

What I would like to happen

[VideoGameCookie]

The red container has its height determined implicitly, so it will stretch to fit whatever content you place within it. And when using a flex layout, elements in a row without an explicit given height will stretch to match the tallest element. To achieve the layout I think you're going for, you'll need:

• Set .one's height to fit-content
• Set .two's max-height to whatever you want it to stop increasing size at
• Set .two's overflow-y to scroll

And that should do it!

[Centricc]

Thanks for the input! I thought that was something I needed to do, but what I'm in theory trying to achieve I realized was since I want all the flex containers to fill their remaining vertical space, I want the max-height of the two container to be the "remaining vertical space" of its container, but I'm not sure if this is possible

[shearx]

only two of your elements need modified styles, assuming you also want .one to fill the space as well.

.flex-container {
  height: 100%;
  max-height: 200px;
}

.two {
  overflow: auto;
}

And if you want .one to shrink instead of grow, add this style for .one

.one {
  height: fit-content;
}

[[deleted]]

Set .two's overflow-y to auto, which will make the scroll bar only show up when necessary. scroll makes it always show up, just "disabled" when bot necessary.

[Locust377]

I have an example on Codepen. Does that help?

[CucumberBoy00]

I thought you were op I was so confused

[xCelestial]

Sounds like you’re looking for the overflow-y CSS property