CSS Flexbox - разрыв ширины, когда у контейнера больше дочерних элементов

Question

Я пытаюсь построить набор цветных блоков одинакового размера на элементе div с тегами span.Я использовал 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>

Вот ссылка на стек в виде бегущего образца: https://stackblitz.com/edit/flex-large-sizes-issue

Тем не менее, я заметил, что при увеличении числа дочерних элементов изгиб, кажется, нарушает ширину дочерних элементов.Я предполагаю, что это потому, что он округляет вычисление дочерней ширины после определенной точки.Может кто-нибудь помочь мне с преодолением этой проблемы.

Answer 1

У вас для каждого span установлено значение width: 100%.Я предполагаю, что это означает 100% контейнера, так как процентные размеры для дочерних элементов основаны на родительском размере.

Тогда вы ищете flex-shrink: 0 для промежутков.

Flexэлементы по умолчанию установлены на flex-shrink: 1.Это позволяет им уменьшить их размер, чтобы не переполнять контейнер.