CODEWITHSUNDEEP
cssflexbox
ap-o
ap-o

Reputation: 170

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?

Upvotes: 0

Views: 52

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 1

Related Questions