CODEWITHSUNDEEP
htmlcssflexbox
Jim Peeters
Jim Peeters

Reputation: 2863

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;
}

Upvotes: 0

Views: 40

Answers (1)

Jim Fahad
Jim Fahad

Reputation: 635

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/

Upvotes: 1

Related Questions