CODEWITHSUNDEEP
css
Nigiri
Nigiri

Reputation: 3639

Why is the default value of flex-basis not 'auto'?

.wrapper {
  display: flex;      
  flex-flow: row wrap;
}

.aside-1 {
  width: 300px;
  flex: 1;
  background: gold;
}

.aside-2 {
  flex: 1;
  background: hotpink;
}
<div class="wrapper">
  
  <aside class="aside-1">Aside 1</aside>
  <aside class="aside-2">Aside 2</aside>
  
</div>

In this case, the width of .aside-1 should be longer than the one of .aside-2 if the flex-basis of .aside-1 was 'auto'.
But it seems being 0%, so the width of .aside-1 and .aside-2 are the same.

Upvotes: 1

Views: 781

Answers (1)

misterManSam
misterManSam

Reputation: 24702

The answer is found in the docs here:

<‘flex-basis’>

This component sets the flex-basis longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. It takes the same values as the width property (except auto is treated differently) and an additional content keyword. When omitted from the flex shorthand, its specified value is 0%.

(emphasis mine)

In your example, the flex-basis value is correctly set at 0% when not defined in the flex shorthand.

Upvotes: 1

Related Questions