css Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search