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> 

Answer 1

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>