<h2>.z.a>*{flex-basis:auto}</h2>
<div class="a z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>.z.b>*{flex-basis:50px}</h2>
<div class="b z">
  <div>50px</div>
  <div>50px</div>
  <div>50px</div>
</div>

<h2>.z.c>*{flex-basis:100px}</h2>
<div class="c z">
  <div>100px</div>
  <div>100px</div>
  <div>100px</div>
</div>

<h2>.z.d>*{flex-basis:150px}</h2>
<div class="d z">
  <div>100px</div>
  <div>100px</div>
  <div>100px</div>
</div>
<p>.z.d>* 박스가 100px 크기로 수축한 이유는 다음과 같다.</p>
<ul>
  <li>선언하지 않은 속성 flex-shrink의 기본값이 '1'이기 때문에 free-space(-150px) 공간만큼 균등하게 수축 발생.</li>
  <li>박스 기본 크기 + ( free space / 수축지수 총 합 ) * flex-shrink 값 = flex item 크기.</li>
  <li> 150+(-150/3)*1=100</li>
</ul>
.z{display:flex;width:300px;height:32px;background:silver;color:white;outline:5px solid black;margin-bottom:2em;text-align:center;}

.z>:nth-child(1){background:red;}
.z>:nth-child(2){background:green;}
.z>:nth-child(3){background:blue;}

.z.a>*{flex-basis:auto;}
.z.b>*{flex-basis:50px;}
.z.c>*{flex-basis:100px;}
.z.d>*{flex-basis:150px;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.