Using flexbox, can I have 1 fixed-width column and 1 column that takes the rest of the width?

Question

Currently I have something similar to the code below. I'm trying to make the red column irresponsive with set width of 300px but keep the responsiveness of the blue column.

.specific-image-container {
    display: flex;
    position: relative;
    width: 100%;
}
.specific-image-column {
    flex: 4;
    background-color: blue;
}
.more-images-column {
    flex: 1;
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

    <div class="specific-image-column">
        <div class='content'></div>
    </div>
    
    <div class="more-images-column">
        <div class='content'></div>
    </div>
    
</div>

Michael Benjamin · Accepted Answer · 2018-07-18T21:35:40.510

9

Yes, set the fixed column to flex-grow: 0 (so it doesn't grow), flex-shrink: 0 (so it doesn't shrink), and flex-basis: 300px (so it stays fixed at 300px).

jsFiddle demo

.specific-image-container {
    display: flex;
}
.specific-image-column {
    flex: 1;
    background-color: blue;
}
.more-images-column {
    flex: 0 0 300px; /* new */
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

  <div class="specific-image-column">
    <div class='content'></div>
  </div>

  <div class="more-images-column">
    <div class='content'></div>
  </div>

</div>

edited Jul 18 '18 at 21:35

answered Jul 18 '18 at 21:30

Michael Benjamin

346,931
104
581
701

1

Worked like a charm! – Onyx Jul 18 '18 at 21:35
@michael there is already too many dupes on this one ;) – dippas Jul 18 '18 at 23:03
okay @dippas.. you are right.. I should have looked around first – Michael Benjamin Jul 19 '18 at 00:04

score 2 · Answer 2 · answered Jul 18 '18 at 21:31

2

Set flex-shrink: 0; width: 300px; on the irresponsive element, and flex-grow: 1; on the flexible element. You can get rid of the flex property once you’ve done that.

answered Jul 18 '18 at 21:31

Ben Steward

2,338
1
13
23

score 1 · Answer 3 · answered Jul 18 '18 at 21:32

Try using the flex-basis rule. You can use this rule in place of width in flexbox elements. You can also use calc to set the first column to 100% - 300px to make sure 300px takes priority.

.specific-image-container {
    display: flex;
    position: relative;
    width: 100%;
}
.specific-image-column {
    flex-basis: calc(100% - 300px);
    background-color: blue;
}
.more-images-column {
    flex-basis: 300px;
    background-color: red;
}
.content {
  height: 300px;
}

<div class="specific-image-container">

    <div class="specific-image-column">
        <div class='content'></div>
    </div>
    
    <div class="more-images-column">
        <div class='content'></div>
    </div>
    
</div>

Using flexbox, can I have 1 fixed-width column and 1 column that takes the rest of the width?

3 Answers3