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 usemin-width: autoormin-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?

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 exceptvisible)

Flexbox specification

Aboutautovalue...

in other words:

• min-width: autoandmin-height: autoThe default is only applicable whenoverflowisvisible.
• If the value ofoverflowis notvisible, the value of the min-size attribute is0.
• Therefore,overflow: hiddencan replacemin-width: 0andmin-height: 0.

as well as...

• The minimum size algorithm only applies to spindles.
• For example, flex items in row-direction containers will not getmin-height: autoby 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 defaultmin-width: auto/min-height: auto## on higher level items #.

min-width: autocan prevent the nested item below withmin-width: 0from shrinking.

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

• Chrome vs. Firefox / Edge

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

  min-width: 0/min-height: 0or (2) A mysterious algorithm automatically applies the default value of0in certain situations. (This is probably what they callintervention.) 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, theautovalues for themin-widthandmin-heightproperties are "new". This means that some browsers may still render the0value by default because they implemented flex layout before the value updated, and because0is inCSS 2.1The initial values ofmin-widthandmin-height.IE11 is one of them.Other browsers have been updated to the newerautovalues defined in theflexbox 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 }

 
Lorem ipsum dolor
 
Lorem ipsum dolor
 
Lorem ipsum dolor
 
Lorem ipsum dolor