How does the flex shorthand handle a single value that is represented as a percentage?

user_498656 0
Viewed 417

The Mozilla Developer Network flex article says of its syntax:

One-value syntax: the value must be one of:

  • a unitless <number>: then it is interpreted as <flex-grow>.
  • a valid value for width: then it is interpreted as <flex-basis>.
  • one of the keyword values none, auto, or initial.

The second bullet implies that flex: 20%; is equivalent to flex-basis: 20%;, as 20% is a valid value for width.

However, that is not the case in practice:

  1. flex shorthand 

.container {
  display: flex;
}

.container>div {
  padding: 6px;
}

.one {
  background: #fcc9e5;
  flex: 20%;
}

.two {
  background: #ecaef9;
  flex: 1;
}
<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
</div>

  1. flex-basis

.container {
  display: flex;
}

.container>div {
  padding: 6px;
}

.one {
  background: #fcc9e5;
  flex-basis: 20%;
}

.two {
  background: #ecaef9;
  flex: 1;
}
<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
</div>

So, what is happening here?

flexbox specifications css
2 Answers
Related