Scrollbar with extra space when trying to display 4 even quadrants on page using flexbox

Question

I am trying to display 4 even quadrants with images in them. Each quadrant will have a sidebar that takes up 20% of the main div's width.

I am trying to figure out why I am getting a scrollbar here with a small white gap at the bottom. When I inspect in developer tools it isn't showing as padding or margin.

        body {
            padding: 0;
            margin: 0;
            height: 100vh;
        }

        .slide {
            display: flex;
            flex-wrap: wrap;
        }

        .group {
            display: flex;
            width: 50%;
            /* outline: solid 3px #fff; */
        }

        .side {
            width: 20%;
            background-color: red;
        }

        .main {
            background-color: blue;
        }

        img {
            width: 100%;
            height: 100%;
        }





    
    
    
    Display

Thomas Zimmermann · Answer

It's about your image sizing and your .main class not implementing 80% width. Try this:

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

.slide {
  display: flex;
  flex-wrap: wrap;
}

.group {
  display: flex;
  width: 50%;
  /* outline: solid 3px #fff; */
}

.side {
  width: 20%;
  background-color: red;
}

.main {
  background-color: blue;
  width: 80%; // Here, missing width 80%
}

img {
   width: 100%;
   height: auto; // Changed to auto
}




  
    
    
    
    Display

Basically your image size doesn't fit your layout

Kameron · Answer

As indicated by the other answer, it's your image size.

It's commonly known that images without max-width: 100%; will be very unresponsive. Especially large images like this. Now, when you add height: 100%; it's trying to maintain its height within the parent which is causing the white space you see.

You'll notice if you add flex: 1; to .main the scrollbar disappears but the white space gets larger. This is demonstrating how the images would behave when responsive.

Solution: I asked in the comments if the images are placeholders for other elements. If they are, then all you need is flex: 1; on .main. But if you are going to have large images there I suggest using background-image.

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

.slide {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.group {
  display: flex;
  width: 50%;
  /* outline: solid 3px #fff; */
}

.side {
  width: 20%;
  background-color: red;
}

.main {
  background-image: url('https://dummyimage.com/3840x2160/000/fff');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: blue;
  flex: 1;
}





  
  
  
  Display

Thomas Zimmermann · Answer

To give you my point of view. I think the right way to do it is with a grid layout. I don't think flex wrap suits well this use case. See if I remove an image, the layout stays the same

body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.slide {
  display: grid;
  max-height: 100vh;
  grid-template-columns: 1fr 1fr; // Split the screen in two equal parts vertically
}

.group {
  display: grid;
  grid-template-columns: 4fr 1fr; // Split the screen in 80% and 20% horizontally 
}

.side {
  background-color: red;
}

.main {
  max-height: 50vh;
  min-height: 50vh;
  background-color: blue;
}

img {
   width: 100%;
   height: 100%;
}




  
    
    
    
    Display

Scrollbar with extra space when trying to display 4 even quadrants on page using flexbox

3 Answers