Jim Peeters Jim Peeters - 1 month ago 12
CSS Question

How can I prevent flexboxes from taking the remaining width of the row?

I want every cell to be 1/3 of the row. I tried achieving this with flexbox but the boxes with the css property "flex:1" act like they have "width:50%".

Fiddle example: http://jsfiddle.net/skip405/NfeVh/1073/

Html:

<div class="container">
<div class="row">
<div class="cell">

</div>
<div class="cell">
</div>
</div>
</div>


Css:

.container {
width: 100%;
background-color: gray;
}

.row {
background: #ccc;
display: flex;
flex: 3;
flex-direction: row;
}

.cell {
width: 50px;
height: 50px;
background-color: white;
border:1px solid black;
display: flex;
flex: 1;
}

Answer

Use this:

.cell {
  width: 50px;
  height: 50px;
  background-color: white;
  border:1px solid black;
  display: flex;
  flex: 0 0 calc(100%/3);
}

Use flex: 0 0 calc(100%/3)

See the fiddle: http://jsfiddle.net/NfeVh/1394/