Flex-бокс: сгибать термоусадочные и сгибать-обертка не работает, как ожидалось

Question

Моя проблема лучше всего может быть объяснено в этом примере: [JSFiddle]

#flex-container-1 { /*has 10 items*/ 
    flex-wrap: no-wrap; 
} 

#flex-container-2 { /*has 10 items*/ 
    flex-wrap: wrap; 
} 

#flex-container-3 { /*has 11 items*/ 
    flex-wrap: wrap; 
} 

У меня есть три контейнера из которых две функции, как ожидалось. Но третий не сокращает 11-й элемент, а вместо этого добавляет его за пределы контейнера.

Есть ли способ сжать предметы в третьем контейнере, чтобы он не переполнялся?

[JSFiddle] https://jsfiddle.net/fpcz3ghc/1/.

Высота контейнера должна быть фиксированной.

Answer 1

Не определяйте фиксированную высоту на .flex-item. Вместо этого установите max-height:50px;.

Попробуйте следующее решение:

.flex-container { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: black; 
 
    display: flex; 
 
    margin: 50px; 
 
} 
 
#flex-container-1 { 
 
    flex-wrap: no-wrap; 
 
} 
 
#flex-container-2 { 
 
    flex-wrap: wrap; 
 
} 
 
#flex-container-3 { 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    max-height:50px; 
 
    flex-basis: 50px; 
 
    background-color:red; 
 
    border-radius: 20px; 
 
}

<div id="main"> 
 
    <div id="flex-container-1" class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
    <div id="flex-container-2" class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
    <div id="flex-container-3" class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
</div>