Question 190534 in Html Question posted in
Some basic documentation can be found here.

Html – Flex Box Whitespace Issue (Right Side)

I’m having some issues making this flex box span 100% of the width of the page.

https://jsfiddle.net/yfhbuwc3/

<html></html>

On the right hand side is whitespace (I have no idea where it’s coming from)

I’ve tried making the width of the container 100% I’ve tried setting it to calc(100% + Xpx) but that doesn’t calculate the spacing right and makes the box on the bottom right cut off the page on smaller screens.

Tags:

3

Answers


  1. 0

    Did you try ? body {width:100%;}

    Login or Signup to reply.
  2. 0

    Your CSS-styles seem to be incomplete. When you are using flex-basis, you also should define flex-grow and/or flex-shrink. These properties are defining, how the elements will behave based on their flex-basis.

    Please try it like this:

    .top-row {
    flex-basis: 48%;
    flex-grow: 1;
    height: 300px;
}

.bottom-row {
    flex-basis: 32%;
    flex-grow: 1;
    height: 300px;
    vertical-align: top;
}
    Login or Signup to reply.
  3. 0

    Because you’re setting flex-basis: 48%; on .top-row which means each .top-row will only take 48% of the screen. Since you want them to take the whole screen therefore 100/2 = 50% so set flex-basis to 50%.

    And for the .bottom-row, you are setting it to flex-basis: 32%;, therefore 100/3 = 33.3333333333% so set flex-basis to 33.3333333333%.

    #grid-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.top-row {
    flex-basis: 50%;
    height: 300px;
}

.bottom-row {
    flex-basis: 33.3333333333%;
    height: 300px;
    vertical-align: top;
}

#top-left {
    background-color: pink;
}

#top-right {
    background-color: red;
}

#bottom-left {
    background-color: orange;
}

#bottom-center {
    background-color: lightblue;
}

#bottom-right {
    background-color: purple;
}
    <!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="grid-container">
            <div class="top-row" id="top-left"></div>
            <div class="top-row" id="top-right"></div>

            <div class="bottom-row" id="bottom-left"></div>
            <div class="bottom-row" id="bottom-center"></div>
            <div class="bottom-row" id="bottom-right"></div>
        </div>
    </body>
</html>

    I recommend learning more about Flexbox in general.

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

Back To Top
Search