[SOLVED] Flex Box Whitespace Issue (Right Side)

Flex Box Whitespace Issue (Right Side)

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

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

Solution

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.