Why don't flex items shrink beyond content size?

Question

I have 4 Flexbox columns and everything works fine, but when I add some text to the column and set it to a large font size, it makes the column wider than it should be due to the Flex property.

I tried using word-break:break-word and it helped, but when I resized the column to a very small width, the letters in the text were broken into multiple rows (one letter per row), but the column width will not be less than the size of a letter.

Watch this video (Initially, the first column is the smallest, but when I resize the window, it is the widest column. I just want to always respect the Flex settings; Flex size 1:3:4:4)

I know, setting the font size and column padding to smaller would help...but is there any other solution?

I cannot use overflow-x:hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

Answer 1

I find that Flex and grid have been bugging me for years, so I propose the following:

* { min-width: 0; min-height: 0; }

Then if you need this behavior just use min-width: auto or min-height: auto.

In fact, you can also add box size to make all layouts more reasonable:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

Does anyone know if there are any weird consequences? I haven't had any problems in a few years of using a mix of the above methods. In fact, I can't think of any cases where I would want to layout from content outwards into the Flex/Grid, rather than layout from the Flex/Grid inward into the content --- of course if they exist, they are rare. So this feels like a bad default. But maybe I'm missing something?

Answer 2

Automatic minimum size for Flex projects

You have encountered Flexbox default settings.

Flexible items cannot be smaller than the size of their content along the main axis.

The default value is...

• Minimum Width: Automatic
• Minimum Height: Automatic

...for elastic items in row and column directions respectively.

You can override these defaults by setting the flex item to:

• Minimum width: 0
• Minimum height: 0
• Overflow: hidden (or any other value, except visible)

---

Flexbox Specification

Aboutautovalue...

in other words:

• min-width: auto and min-height: auto The default values ​​only apply when overflow is visible.
• If the overflow value is not visible , the value of the min-size attribute is 0.
• Therefore, overflow: hide can replace min-width: 0 and min-height: 0.

besides...

• The minimum size algorithm only applies to spindles.
• For example, Flex items in row-oriented containers will not get min-height: auto by default.
• For more detailed instructions, see this post:
  • The minimum width of bend direction: row and bend direction: column are presented differently

---

You've applied min-width: 0 but the project still doesn't shrink?

Nested Flex Containers

If you are working with a Flex project on multiple levels of the HTML structure, you may want to override the default min-width: auto / min-height: auto located higher level items.

Basically, a higher-level Flex project with min-width: auto prevents projects nested below with min-width: 0 from shrinking.

Example:

• Flex item does not shrink smaller than its contents
• Make children fit into parent
• Blank CSS properties can cause problems with Flex

---

Browser rendering instructions

• Chrome vs. Firefox / Edge

  Since at least 2017, Chrome seems to have either (1) reverted to the min-width: 0 / min-height: 0 defaults, or (2) based on a mysterious algorithm The 0 default value is automatically applied in some cases. (This is probably what they call intervention.) So many people are seeing their layouts (especially the required scrollbars) working as expected in Chrome, but Not so in Firefox/Edge. This issue is covered in more detail here: flex-shrink differences between Firefox and Chrome

• IE11

  As noted in the specification, the auto value for the min-width and min-height properties is "new". This means that some browsers may still render the 0 value by default because they implement Flex layout before updating the value, and 0 is the initial value of min CSS 2.1. IE11 is such a browser. Other browsers have been updated to newer auto values ​​defined in the flexbox specification.

---

Modified demo

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>