Width of Flexbox Columns not Shrinking on Window Resize - CSS

CodeCabbie
April 17, 2023
215 views
2 votes
3 Answers

I’m using Flexbox to make 5 boxes responsive when the browser window is shrunk. 4 of the boxes are in 2 columns and fail to shrink (flex-direction: column). The single box that is not in a column shrinks correctly.

(Bob is behaving correctly, but Kate, Nick, Jane and Fred refuse to reduce their width.)

How do I make the width of the columns shrink as the browser window size is reduced?

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  border: 2px solid red;
}

.column {
  display: flex;
  flex-direction: column;
}

.big {
  display: flex;
  width: 400px;
  height: 400px;
  background: yellow;
  border: 5px solid blue;
}

.small {
  display: flex;
  width: 195px;
  height: 195px;
  background: yellow;
  border: 5px solid blue;
}

<div class="container">
  <div class="big"><span>Bob</span></div>

  <div class="column">
    <div class="small"><span>Kate</span></div>
    <div class="small"><span>Nick</span></div>
  </div>

  <div class="column">
    <div class="small"><span>Jane</span></div>
    <div class="small"><span>Fred</span></div>
  </div>
</div>

Demo here: https://jsfiddle.net/CodeCabbie/1xvjeo3p/44/

Answers

Using fixed width (width: 195px;) for the small boxes using the .small class seems strange, and would explain why those columns do not shrink as the window resizes.

A combination of:

flex-basis for the small boxes
flex-grow property on the columns

That would allow all columns to distribute the remaining space accordingly.

Something like this example: https://jsfiddle.net/ko4Lszdy/

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  border: 2px solid red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Small columns will take 1/6 of the available space */
  max-width: 200px;
}

.big {
  display: flex;
  flex-grow: 2;
  /* Big column will take 2/3 of the available space */
  max-width: 400px;
  height: 400px;
  background: yellow;
  border: 5px solid blue;
}

.small {
  display: flex;
  flex-basis: 100%;
  /* Allow the small boxes to grow/shrink as needed */
  height: 195px;
  background: yellow;
  border: 5px solid blue;
}

<div class="container">
  <div class="big"><span>Bob</span></div>

  <div class="column">
    <div class="small"><span>Kate</span></div>
    <div class="small"><span>Nick</span></div>
  </div>

  <div class="column">
    <div class="small"><span>Jane</span></div>
    <div class="small"><span>Fred</span></div>
  </div>
</div>

If it is not essential to use a flexbox, it is better to create all this using a grid layout. As a bonus, you will get a more concise and understandable code:

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  /* optional */
  grid-gap: 5px;
  max-width: 800px;
  margin: 0 auto;
  background-color: blue;
  padding: 5px;
}

.big {
  grid-row: span 2;
  min-height: 400px;
  background: yellow;
}

.small {
  background: yellow;
}

<div class="container">
  <div class="big">Bob</div>
  <div class="small">Kate</div>
  <div class="small">Nick</div>
  <div class="small">Jane</div>
  <div class="small">Fred</div>
</div>

Just add min-width: 0 to the .column class

The default value for min-width is auto, which is computed to zero.
When an element is a flex item, the value of min-width doesn’t compute
to zero. The minimum size of a flex item is equal to the size of its
contents.

FIDDLE

.container {
            display: flex;
            width: 100%;
            justify-content: center;
            border: 2px solid red;
        }

        .column {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .big {
            display: flex;
            width: 400px;
            height: 400px;
            background: yellow;
            border: 5px solid blue;
        }

        .small {
            border: 5px solid blue;
            width: 195px;
            height: 195px;
            background: yellow;
            display: flex;
        }

<div class="container"> 
        <div class="big"><span>Bob</span></div>
        
        <div class="column">
            <div class="small"><span>Kate</span></div>
            <div class="small"><span>Nick</span></div>
        </div>
        
        <div class="column">
            <div class="small"><span>Jane</span></div>
            <div class="small"><span>Fred</span></div>
        </div>   
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Width of Flexbox Columns not Shrinking on Window Resize – CSS

Answers