Flexbox with one fixed column width

Question

I am trying to get a flexbox with two columns, the left one that has a fixed width and the right one that scales when the page is resized. For instance:

 <style> .flex_container { display: flex; width: 100%; } .flex_col_left { width: 200px; } .flex_col_right { width: 85%; } </style> <div class = "flex_container"> <div class = "flex_col_left"> ..... </div> <div class = "flex_col_right"> ..... </div> <div> 

This works to some extent, but it doesn't seem right, as I mix px and%. Is it wrong to do so, and if so, what could be the best solution?

The issue with EDIT class names was a typo and now fixed.

Answer 1

Instead of setting the width to % in the right column, you can simply use flex: 1 and it will take the rest of the free width in the row.

 .flex_container { display: flex; width: 100%; } .flex_item_left { width: 200px; background: lightgreen; } .flex_item_right { flex: 1; background: lightblue; } 

 <div class="flex_container"> <div class="flex_item_left"> ..... </div> <div class="flex_item_right"> ..... </div> <div> 

Answer 2

You can use flex-grow: 1 for an element with an unfixed width so that it can grow (and without setting the width).

 .flex_container { display: flex; width: 100%; } .flex_item_left { width: 200px; background: #fa0; } .flex_item_right { background: #0fa; flex-grow: 1; } 

 <div class="flex_container"> <div class="flex_item_left"> ..... </div> <div class="flex_item_right"> ..... </div> <div>