Flex item with padding overflows container

Question

The issue is that when I add padding to a div that uses flexbox it goes outside the parent element when the width of the child element is 100%. Why is that? Thanks!

I noticed that the issue is fixed by adding box-sizing: border-box; or by changing flex: 0 0 100% to flex: 0 1 100%? which method is better or more efficient?

.row {
  background: orange;
  justify-content: space-between;
  padding: 30px;
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.row>div {
  flex: 0 0 31%;
  padding: 30px;
}

.colLeft {
  background: red;
}

.colRight {
  background: blue;
}

@media only screen and (max-width: 630px) {
  .row>div {
    flex: 0 0 100%;
  }
}

<div class="row">
  <div class="colLeft">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="colRight">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

score 0 · Answer 1 · answered May 21 '19 at 18:36

There are a couple of ways of doing it. One of them that I think it is pretty easy it's adding "flex-direction: column" to the container. That would fix the problem with the padding on your code. I hope this helps :)

.row {
    background: orange;
    justify-content: space-between;
    flex-direction: column;
    padding: 30px;
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.row > div {
    flex: 0 0 31%;
    padding: 30px;
}

.colLeft {
    background: red;
}

.colRight {
    background: blue;
}

@media only screen and (max-width: 830px) {
    .row > div {
        flex: 0 0 100%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
   <div class="row">
      <div class="colLeft">
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="colRight">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
       
   </div>
    
</body>
</html>

Michael Benjamin · Accepted Answer · 2019-05-21T20:42:27.867

0

You're telling the flex items to be 100% width (via flex-basis):

@media only screen and (max-width: 830px) {
    .row > div {
        flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
    }
}

But you're also giving each item 60px in horizontal padding:

.row > div {
    padding: 30px;
}

Well, 100% + 30px + 30px is greater than 100%, so there will naturally be an overflow.

You can fix the problem by setting the box model to incorporate the padding lengths into the width calculation.

Add this to your code:

.row > div {
  box-sizing: border-box;
}

Learn more about the CSS box-sizing property.

edited May 21 '19 at 20:42

answered May 21 '19 at 20:36

Michael Benjamin

346,931
104
581
701

Thanks! Would this be more efficient than by changing flex: 0 0 100%; to flex: 0 1 100%; ? Because i noticed that this also fixes the issue. – charlesFromSoCal May 21 '19 at 21:29
You need to test both and see which one works best with your overall layout. Why not use both? Also, consider adding `min-width: 0`, for reasons described here: https://stackoverflow.com/q/36247140/3597276 – Michael Benjamin May 21 '19 at 21:32

Flex item with padding overflows container

2 Answers2