Prevent flexbox shrinking
CssFlexboxCss Problem Overview
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;
}
Css Solutions
Solution 1 - Css
Try setting the flex-shrink
property to 0
on the .flex-box
.
Solution 2 - Css
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 3 - Css
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 4 - Css
If like me your flex-direction
is row
, try setting the width of the child to 100%. That fixed the shrinking for me.
Solution 5 - Css
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
Solution 6 - Css
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 7 - Css
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 8 - Css
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>