.container { height: 100px; width: 100px; border: 1px solid green; display: flex; }.item { height: 100px; border: 1px solid red; flex: 1 0 auto; display: flex;}.item-child { height: 100px; border: 1px solid blue; flex: 1 0 100px;}<div class="container"><div class="item"><div class="item-child"></div></div><div class="item"><div class="item-child"></div></div></div>In this snippet, .item-children's width value calculated to 100px, as it is set in their flex-basis property.
However, why .items themselves have width 50px each, shouldn't it be 100px as long as flex-basis: auto; forces them to borrow the width from their content and flex-shrink: 0; prevents their shrinking?