flex的子元素宽度如何适应父元素的宽度

Question

如下伪代码：

<div class="flex">
    <div class="outer">
        <div style="overflow:hidden;white-space:nowrap;">
           <span>XXXXX</span>
           <span>XXXXX</span>
           ...
       </div>
    </div>
</div>

flex的display=flex，我想要的效果是不管有多少个 span ，outer的宽度不能超过父元素flex的宽度。可实际上outer会被里面的元素撑开，span越多outer就越宽（是的，中间那个层的overflow:hidden好像没有起到效果），不知道这个该怎么解决了……

Answer 1

给outer限制下宽度。

.outer {
  max-width: 100%;
}