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

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

Flexbox Specification

Aboutautovalue...

in other words:

• min-width: autoandmin-height: autoThe default values only apply whenoverflowis visible.
• If theoverflowvalue is notvisible, the value of the min-size attribute is0.
• Therefore,overflow: hidecan replacemin-width: 0andmin-height: 0.

besides...

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

Basically, a higher-level Flex project withmin-width: autoprevents projects nested below withmin-width: 0from 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 themin-width: 0/min-height: 0defaults, or (2) based on a mysterious algorithm The0default value is automatically applied in some cases. (This is probably what they callintervention.) 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, theautovalue for themin-widthandmin-heightproperties is "new". This means that some browsers may still render the0value by default because they implement Flex layout before updating the value, and0is the initial value ofminCSS 2.1.IE11 is such a browser.Other browsers have been updated to newerauto中定义的 autovalues 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 }

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