Search code examples
cssflexboxgifimage-scalingwebflow

Why does my wrapper not expand beyond a certain height?

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.

Solution

  • 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.