css flexbox 3-column layout where first is fixed width

Question

I am trying to better understand flex box css and have a main layout for all pages. It is 3 columns where the first column is fixed width and the others can be any size so long as all 3 take up 100% width.

I believe the problem is in .col class but unsure how to set the 1st column and let the other grow. Thank you.

.wrapper {
  display: flex;
  flex-direction: row;
}

.col {
  flex-basis: 25%;
  align-items: stretch;
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

See *"The `flex-shrink` factor"* here: https://stackoverflow.com/q/34352140/3597276 — Michael Benjamin, Jan 28 '18 at 22:59

score 3 · Accepted Answer · answered Jan 28 '18 at 08:21

You simply need to specify a fixed width to the first one and then set flex:1 to the other so they take the remaining space and fill 100% of the container space:

.wrapper {
  display: flex;
  flex-direction: row;
}


.col {
  flex: 1;
  background: red;
}
.col:first-child {
  width: 100px; /* Or a percentage value */
  flex:initial;
  background: green;
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

I knew it was a simple fix. Thank you! If I had 1 more upvote on the question I could give you one. — , Jan 28 '18 at 08:30

css flexbox 3-column layout where first is fixed width

1 Answers1