Flex 2 columns how to keep the first item's width the same when window is resized

Issue

I have two columns and the left column is supposed to have a fixed width while the right column expects to take up the rest of the width. The scenario that I have is when the window is resized, I want to keep the left column's width the same regardless of the length of the text in the right column.

.container{
    display: flex;
    height: 50px;
}

.left {
  border: 1px solid red;
  width: 400px;
}

.right {
  border: 1px solid blue;
  flex-grow: 1
}

<div class="container">
    <div class="left">
        left aligned column
    </div>    
    <div class="right">
        I want the right column to take up the rest of the space while keeping the left item's width when the window is resized
    </div>
</div>
<div class="container">
    <div class="left">
        left aligned column
    </div>    
    <div class="right">
        short text
    </div>
</div>
 

Solution

Use the property flex directly. The documentation shows that is possible pass up three parameters to flex.

The flex property may be specified using one, two, or three values.

For more details of use and flex#syntax

.container {
  display: flex;
}
.left {
  border: 1px solid red;
  flex: 0 0 400px;
}
.right {
  border: 1px solid blue;
  flex: 1 0;
}

<div class="container">
  <div class="left">
    left aligned column
  </div>
  <div class="right">
    I want the right column to take up the rest of the space while keeping the left item's width when the window is resized
  </div>
</div>
<div class="container">
  <div class="left">
    left aligned column
  </div>
  <div class="right">
    short text
  </div>
</div>

Answered By - ZapSys