Flexbox with one fixed column width [duplicate]

Question

I am trying to acheive a flexbox with two columns, the left that is of a fixed width and the right that scales as the page size is altered. For example:

<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 an extent but it does not feel right as I am mixing px and %. Is it incorrect to do it this way and if so what might be a better solution?

EDIT Classes naming issue was a typo and now fixed.

Answer 1

Instead of setting width in % on right column you can just use flex: 1 and it will take rest of free width in a 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 on the non-fixed-width element to allow it to grow (and no width setting).

.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>