Why can't flex items shrink to less than the content size?

Question

I have 4 flexbox columns and everything works fine, but when I add some text to one 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 resize the columns to a very small width, the letters in the text are broken into multiple lines (one letter per row), but the width of the column will not be smaller than the size of a letter.

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

I know that setting the font size and column padding to smaller values ​​will 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've found this has caused me trouble many times over the past few years with both flex and grid, so I suggest the following:

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

If you need this behavior, just use min-width: auto or min-height: auto.

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

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

Does anyone know if there are any strange consequences? In several years of using the above method, I haven't had any problems. In fact, I can't think of any situation where I would want to layout from content outwards into flex/grid, rather than from flex/grid inward to content --- and if such a situation exists, it's certainly 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 the default settings of flexbox.

Flex items cannot be smaller than the size of their content on the main axis.

The default setting is...

• min-width: auto
• min-height: auto

...applies to flex items in row and column directions respectively.

You can set the flex item to:

• min-width: 0
• min-height: 0
• overflow: hidden (or any other value except visible)

---

Flexbox specification

Aboutautovalue...

in other words:

• min-width: auto and min-height: autoThe default is only applicable when overflow is visible.
• If the value of overflow is not visible, the value of the min-size attribute is 0.
• Therefore, overflow: hidden can replace min-width: 0 and min-height: 0.

as well as...

• The minimum size algorithm only applies to spindles.
• For example, flex items in row-direction containers will not get min-height: auto by default.
• For a more detailed explanation, see this post:
  • min-width is rendered differently in flex-direction: row and flex-direction: column

---

You have applied min-width: 0 but the project still won't shrink?

Nested Flex Container

If you are working with flex items on multiple levels of your HTML structure, you may need to override the default min-width: auto / min-height: auto## on higher level items #.

Basically, a higher level flex item with

min-width: auto can prevent the nested item below with min-width: 0 from shrinking.

Example:

• Flex items cannot be shrunk smaller than their contents
• Adapt child elements to parent elements
• white-space CSS property conflicts with flex layout

---

Browser rendering considerations

• Chrome vs. Firefox / Edge

  Since 2017, Chrome appears to either (1) revert to the default values ​​of

  min-width: 0 / min-height: 0 or (2) A mysterious algorithm automatically applies the default value of 0 in certain situations. (This is probably what they call intervention.) So many people see their layouts (especially the expected scrollbars) working as expected in Chrome, but not in Firefox/ Doesn't work in Edge. For more detailed information, see here: flex-shrink differences between Firefox and Chrome

• IE11

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

---

Revised 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>