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

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 >
    <div >
        left aligned column
    </div>    
    <div >
        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 >
    <div >
        left aligned column
    </div>    
    <div >
        short text
    </div>
</div>

CodePudding user response：

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 >
  <div >
    left aligned column
  </div>
  <div >
    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 >
  <div >
    left aligned column
  </div>
  <div >
    short text
  </div>
</div>

CodePudding user response：

Use flex-grow: 1 its gonna take up the remaining space of the page. You can read more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

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

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

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

}

<div >
    <div >
        left aligned column
    </div>    
    <div >
        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 >
    <div >
        left aligned column
    </div>    
    <div >
        short text
    </div>
</div>