ap-o ap-o - 5 months ago 10
CSS Question

issue with flexbox columns

I have a flex grid with equal columns, but in some of them i have some padding. It appears that this breaks the columns width.

I tried to add the padding to an inner wrapper, but this won't work for me as its percent based.

.grid{
width: 100%;
display: flex;
flex-direction: row;
}

.column {
flex: 1 1 100%;
display: block;
height: 200px;
background-color: #e5e5e5;
border: 1px solid #999999;
&.padd{
padding: 0 5%;
}
}


https://jsfiddle.net/heyapo/8qntbj3c/

Any ideas?

Answer

Quite simply flex-grow or flex-basis do not equal width.

Detailed explanation here: by Michael_B.

Padding will add to the dimensions of the element receiving it and the other elements will resolve their sizes accordingly.

If you want to use width...use width (and box-sizing).

.grid {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.column {
  width: calc(100% / 3);
  display: block;
  height: 200px;
  background-color: #e5e5e5;
  border: 1px solid #999999;
}
padd {
  padding: 0 20px;
}
<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column padd"></div>
</div>

Comments