0

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?

ap-o
  • 170
  • 1
  • 8

1 Answers1

1

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>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Another solution, depending on limitations, is to use `box-sizing: border-box`. This then allows padding to be included in the width of the container. – Fuzzical Logic Jun 15 '16 at 08:32