W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2020

[csswg-drafts] [css-flexbox-1] flex-basis can not be smaller than min-content (#5367)

From: zjopy via GitHub <sysbot+gh@w3.org>
Date: Tue, 28 Jul 2020 10:01:51 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-666945082-1595930510-sysbot+gh@w3.org>
zjopy has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox-1] flex-basis can not be smaller than min-content ==
I can't find this behavior specified anywhere in the current [spec](https://drafts.csswg.org/css-flexbox/#valdef-flex-flex-basis). But all current versions of the major browsers (Chrome 84, Firefox 78, Safari 13) set the minimal value of `flex-basis` to `min-content`. This makes `flex-basis` behave different from `width`/`height`, since you can't create overflow by making the box smaller than its contents. I don't see to use of this lower bound, since you could just as well use the `min-content` keyword. Is this a bug in the browsers or in the spec?

Minimal example

<div class="container">
  <div class="mincontent">Lorem ipsum</div>
  <div class="smallerflexbasis">Lorem ipsum</div>
  <div class="smallerwidth">Lorem ipsum</div>

.container {
  display: flex;

.container div {
  background-color: lightgrey;
  border: 1px solid black;
  margin: 0 10px;
  /* disable any flexible sizing */
  flex-grow: 0;
  flex-shrink: 0;

.mincontent {
  width: min-content;

.smallerflexbasis {
  flex-basis: 3ex;

.smallerwidth {
  width: 3ex;

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5367 using your GitHub account
Received on Tuesday, 28 July 2020 10:01:53 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:12 UTC