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

Question

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>

flex-shrink: 0 or replace width by min-width – Temani Afif Aug 20 '22 at 09:43 — Temani Afif, Aug 20 '22 at 09:43

score 0 · Answer 1 · answered Aug 20 '22 at 01:17

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

I actually want the left columns' width to be the same regardless of the length of the text in the right column. Sorry that the description was not so clear. — bij3377, Aug 20 '22 at 01:32

ZapSys · Accepted Answer · 2022-08-20T03:11:31.007

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>

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

2 Answers2