'Prevent flexbox shrinking

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;
}
cssflexbox


Solution 1:[1]

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.

Solution 2:[2]

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>

Solution 3:[3]

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

Solution 4:[4]

There are two variants for prevent shrinking flex-child

set to flex-child this prop:

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

In your case flex-child is .flex-box

Solution 5:[5]

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>

Solution 6:[6]

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)

Solution 7:[7]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 firefoxuser_1
Solution 2 Erik Martín Jordán
Solution 3 Serere Jegede
Solution 4
Solution 5 krupesh Anadkat
Solution 6 Félix Paradis
Solution 7 ????????????????????

Related Questions