Я пытаюсь вписать динамически добавленные элементы в гибкий div определенной высоты.Например, мой контейнерный контейнер имеет ширину 100% и высоту 25vh, и у меня есть 50 изображений, загружаемых внутри него в их дочерние контейнеры.Я хочу, чтобы эти контейнеры соответствующим образом изменили размеры и поместились внутри этого div, оставаясь внутри него, 6-7 дочерних div в строке.До сих пор, когда я использую flex-grow: значение 15%, и они перемещаются в новый ряд, они вообще не меняют размер и перекрываются снаружи, перемещая div.Есть ли способ заставить его работать?
Вот что я делаю:
<div class="brand-container">
<div class="tier-top-1">
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
</div>
</div>
И CSS:
.brand-container {
width: 100%;
height: 100vh;
}
.tier-top-1 {
width: 100%;
height: 25vh;
background: white;
display: flex;
justify-content: space-around;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.tier-item {
margin: 1rem;
justify-self: center;
text-align: center;
flex: 1 1 15%;
}
.tier-top-1 img {
max-height: 20vh;
}