javascript - CSS Flexbox - 当容器有更多 child 时宽度中断

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

但是，我注意到当子元素数量增加时，flex 似乎打破了子元素的宽度。我认为这是因为它在某个点之后对子宽度计算进行了四舍五入。有人可以帮助我克服这个问题。

Answer 1

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

那么你要找的是 flex-shrink: 0 on the spans。

Flex 元素默认设置为 flex-shrink: 1。这允许它们减小尺寸以避免溢出容器。