Prevent flexbox shrinking

Question

I'm using flexbox to layout a page because the growing behavior is useful. But I'd like to completely prevent the shrinking behavior.

Anyway to manage this?

Example code:

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div></div>
    <div></div>
</div>

CSS

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

.flex-box {
    flex: 1;
}

zgood · Accepted Answer · 2017-11-16T16:38:57.743

254

Try setting the flex-shrink property to 0 on the .flex-box.

edited Nov 16 '17 at 16:38

answered Mar 20 '15 at 00:00

zgood

12,181
2
25
26

1

For some reason setting `flex-shrink: 0;` didn't work, but manually setting: `flex-shrink: 1 0 auto;` worked fine... – Simon Boudrias Mar 20 '15 at 01:35
2

flex-shrink: 1 0 auto; doesn't seem to be a valid property. – Ashish Ranjan Sep 29 '16 at 12:37
13

they probably meant `flex: 1 0 auto;` – Ryan Taylor Apr 18 '17 at 18:58
3

It appears that setting 0 to the flex-shrink property is not enough in this specific case. When working with `flex-direction:column` you need to also set a `min-width` value to complete this objective. – klewis Jan 24 '20 at 15:25

score 53 · Answer 2 · answered Mar 20 '15 at 00:22

53

Add a min-width with whatever you want the smallest possible value of the box to be. Flexbox won't shrink the width below the min-width.

answered Mar 20 '15 at 00:22

firefoxuser_1

1,793
13
22

1

min-width does work fine, but in responsive design it doesn't adjust with the space if its less than the specified. flex-shrink is not working for me at all though. – Ashish Ranjan Sep 29 '16 at 12:21
Also, safari still uses min-width property for flexbox behavior, resulting in strange cross browser issues between IE - Safari and 'the rest'. Check the notes on can I use: http://caniuse.com/#search=flexbox – Silom Apr 06 '17 at 07:40

score 6 · Answer 3 · edited Apr 08 '23 at 18:25

6

You can try to apply to the child:

.flex-box{
    width: max-content;
}

Final result:

.flex-vertical-container{
  display: flex;
  flex-direction: column;
}
.flex-vertical-container div{
  background: gray;
}
.flex-box{
  width: max-content;
}

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div>This is shrinking</div>
    <div>This is shrinking</div>
</div>

edited Apr 08 '23 at 18:25

TylerH

20,799
66
75
101

answered Jul 24 '19 at 05:33

Erik Martín Jordán

4,332
3
26
36

1

Unless you are targeting a very specific browser, `max-content` wouldn't be a good universal choice. – klewis Jan 24 '20 at 15:30
Not supported by IE and Edge. Supported by Chrome, Safari and Firefox. https://caniuse.com/#search=max-content – Erik Martín Jordán Jan 24 '20 at 17:32

Dandgerson · Answer 4 · 2022-01-09T14:04:16.480

3

There are two variants for prevent shrinking flex-child

set to flex-child this prop:

with explicitly prop flex-shrink: 0;
or with shorthand flex prop flex: 1 0; /* Two values syntax: flex-grow | flex-basis */

In your case flex-child is .flex-box

edited Jan 09 '22 at 14:04

answered Jan 09 '22 at 07:29

Dandgerson

81
1
8

score 2 · Answer 5 · answered May 14 '20 at 11:14

2

If like me your flex-direction is row, try setting the width of the child to 100%. That fixed the shrinking for me.

answered May 14 '20 at 11:14

Serere Jegede

39
3

score 1 · Answer 6 · answered Feb 27 '22 at 18:01

There are already great answers here. The one that worked for me was min-width property on child element and flex-wrap to parent element.

Below is the working demo. You would notice the child with orange color is having fixed min width of 240px, it can expand, but won't go below 240px.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: #e1eaf4;
}

.child {
  margin: 4px 8px;
  padding: 12px 0;
  border-radius: 4px;
  outline: 4px solid #fff;
  background-color: #3794fe;
  color: #fff;
  text-align: center;
}

.child:nth-child(1) {
  flex-grow: 1;
}

.child:nth-child(2) {
  flex-grow: 1;
  min-width: 240px;
  background-color: #e47f0b;
}

.child:nth-child(3) {
  flex-grow: 1;
}

<div class="container">
  <div class="child">
    <p>Child 1</p>
  </div>
  <div class="child">
    <p>Child 2</p>
  </div>
  <div class="child">
    <p>Child 3</p>
  </div>
</div>

score 0 · Answer 7 · answered Dec 01 '21 at 19:22

0

Flex-shrink didn't work for me.

I ended up using white-space: nowrap; on the children.

This won't work for all cases, but if the children of your flex parent are one-liners of text, it just might.

(if using TailwindCSS: whitespace-nowrap)

answered Dec 01 '21 at 19:22

Félix Paradis

5,165
6
40
49

score 0 · Answer 8 · answered Jan 21 '22 at 15:29

flex-wrap: wrap; works https://jsbin.com/zajojanamo/8/edit?html,css,output

main {
  width: 200px;
  height: 200px;
  background: green;
  display: flex;
  flex-wrap: wrap;
}

div {
  box-sizing: border-box;
  border: 4px solid;
  padding: 16px;
  width: 50%;
  background: lightblue;
}

<main>
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</main>

score -1 · Answer 9 · answered Apr 08 '23 at 18:11

-1

To solve that problem use display: inline-flex on flex container( the parent element) directly without changing anything in your code.

answered Apr 08 '23 at 18:11

SomeOne

51
4

Prevent flexbox shrinking

9 Answers9

Linked

Related