Why does my wrapper not expand beyond a certain height?

Question

To explain it as shortly as possible; I have two pictures inside a wrapper. I want these pictures to retain a ratio 3:2. I want the pictures to just push the next object further down the page. This works fine when below a certain browser width, but above a certain browser width it starts overflowing the wrapper... ? Why does the wrapper div stop growing in height? the max-height is set to: none;

link

I feel like there's something obvious I'm missing here?

The 'side-by-side-wrapper'

the img with a 3.2 Ratio

My thinking is that the img has a certain width defiened by the browser width. And because I've defined the ration to be 3:2 (portrait) it should automatically calculate the height as well.

I've tried giving the wrapper a css property * max-height: none !important;*

but it doens't seem to work.

Answer 1

Try updating the styles for the selector .project-img-sidebyside-wrapper like this:

.project-img-sidebyside-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

This should resolve the issue of overlapping. I couldn't figure out how to solve it using flex.

Answer 2

I don't know if i understand the problem correctly, but if you want to have the menu-wrapper at the top and the content_wrapper at the bottom under 500px you have to remove position: sticky; from menu-wrapper with some media query.