<div id="parent">
  <div class=child-auto>넓은텍스트자리를차지</div>
  <div class=child-auto>좁은텍스트</div>
  <div class=child-auto>더좁은</div>
</div>
</br>
<div id="parent">
  <div class=child-0>넓은텍스트자리를차지</div>
  <div class=child-0>좁은텍스트</div>
  <div class=child-0>더좁은</div>
</div>
#parent {
  border: black solid 2px;
  display: flex;
  width:500px;
}

.child-auto {
  border: red dotted 2px;
  margin: 5px;
  flex-grow: 1;
  flex-basis: auto; /* 0과 auto 비교해보기 */
}

.child-0 {
  border: red dotted 2px;
  margin: 5px;
  flex-grow: 1;
  flex-basis: 0; /* 0과 auto 비교해보기 */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.