Equal width using flex and border-box

Question

I am using box-sizing: border-box; with varying border thicknesses within a flexbox. I want the elements within the flexbox to have equal widths, b

Answer 1

The box-sizing: border-box is used to change the default CSS box model used to calculate width and height of the elements.

So would be like this:

• total width = border + padding + content width

  and

• total height = border + padding + content height

But that doesn't happen in flex-grow, but in flex-basis

Here is a good tutorial about flexbox

---

So you can use flex:0 20% instead of flex:1,

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 20%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

Note: if you have more elements than 5, then you can use calc() like this flex: 0 calc(100%/8) where 8 is the # of elements you will have

Snippet with more elements

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 calc(100%/8);
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
  <span class="block">5</span>
  <span class="block">6</span>
  <span class="block">7</span>
</div>

Answer 2

The flex-grow property does not set the width or height of flex items. It's job is to distribute free space in the container among flex items.

You have all items set to flex: 1, which is shorthand for:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

This distributes free space in the row equally among items.

BUT borders (and padding) are factored in separately.

flex-grow doesn't care about box-sizing: border-box, because box-sizing applies to width and height calculations which, as mentioned earlier, are not functions of flex-grow.

Instead, use the flex-basis property, which is equivalent to width (in a row-direction container) and will respect box-sizing:

flex: 0 0 20%;

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 0 0 20%; /* adjustment */
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

Answer 3

One way could be setting a 2px padding to the .block and removing it for .selected

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 2px;
}

.container .block.selected {
  border: 3px solid blue;
  padding: 0px;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

Answer 4

Instead of setting the flex to one, you can set the flex-basis to 20% and then the width will be divided equally:

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100px;
}

.container .block {
  height: 28px;
  flex-basis: 20%;
  border: 1px solid black;
  box-sizing: border-box;
}

.container .block.selected {
  border: 3px solid blue;
}

<div class="container">
  <span class="block">0</span>
  <span class="block">1</span>
  <span class="block selected">2</span>
  <span class="block">3</span>
  <span class="block">4</span>
</div>

Answer 5

your problem is here flex: 1; change it to flex: 1 0 20%; even for more/less elements. no need to calculate the width using calc as others mentioned.

also just change this:

.container .block {
  height: 28px;
  flex: 1;
  border: 1px solid black;
  box-sizing:         border-box;
}

to:

.container .block {
  height: 28px;
  flex: 1 0 20%;
  border: 1px solid black;
    -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

DEMO: https://jsfiddle.net/4aww81wv/