CSS Flexbox-当容器有更多子代时宽度中断

Question

我正在尝试在具有span标签的div上绘制一组大小相等的颜色框。我已经使用display：flex在父对象上实现相同的功能。

<div style="width: 90%; height: 30px; border: blue solid 1px;">
    <div  style="display: flex; height:100%;">
        <!-- ng-repeat to generate random colors array of large size -->
        <span style="flex:1;" ng-repeat="healthValue in $ctrl.colors track by $index" ng-style="{'background-color': healthValue}">
        </span>
    </div>
</div>

以下是正在运行的示例的stackblitz链接： https://stackblitz.com/edit/flex-large-sizes-issue

但是，我注意到当子计数增加时，柔韧性似乎破坏了子元素的宽度。我认为这是因为它在某一点之后四舍五入了孩子的宽度。有人可以帮助我解决这个问题。

Answer 1

您已将每个span设置为width: 100%。我认为这意味着100％的容器，因为子项上的百分比大小基于父项大小。

然后，您要查找的是跨度上的flex-shrink: 0。

弹性项目默认设置为flex-shrink: 1。这样一来，他们就可以减小尺寸，以免容器溢出。