Flexbox Items going outside its container

Question

I'm trying to recreate a math game for a University project with HTML CSS and JS. During the layout, my flexbox items are going outside their container. I gave them a thick border so it is easier to see what is happening. I'm trying to design it first for mobile as I show in the picture below.

See the screenshot here

    .container {
    display: flex;
    flex: 1;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    margin: 1em;
    border-width: 5px;
    border-style: solid;
    border-color: red;
}


.flex-item {
    align-items: center;
    justify-content: center;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(0, 255, 64);
}

Here is the full code in codepen

What I'm doing wrong?

selfagency selfagency · Accepted Answer · 2021-06-20T16:20:26

The issue is the gap in your grid. You need to account for the 0.5em padding added on both sides of your element. To do this, you can use the CSS calc method. Set the width of .answer-options to calc(100% - 1em);, 1em being what you get when you add the .5em and .5em on either side of your grid. You're subtracting that 1em from the 100% width.

Flexbox Items going outside its container

2 Answers