Карусель изображений Fotorama выходит за границу flex-блока, как исправить?

Question

[Thuban]

Имеется div с параметром display: flex, внутри 3 одинаковых по ширине блока с параметрами flex: 1 1 0 (для того, чтобы они были равного размера), если внутри каждого из flex-блоков вставить изображения с параметром width: 100%, то блоки остаются одинакового размера, несмотря на то, какие изображения используются, а если вставить в эти блоки fotorama-карусель, то размеры flex-блоков сбиваются и они выходят за пределы родительского. Как можно выравнять эту карусель?

Comments

[Вадим Кот]

400 * 3 = 1200px плюс отступы явно же больше flex враппера, который лежит в контейнере 1100px.

[Thuban]

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

Answer 1

[Mesuti]

Есть пример кода?

Попробуйте

.gallery_group {
width: 100%
}

Answer 2

[Thuban]

В gallery_group нельзя ставить width: 100%, т.к. это flex-блок и он займет весь родительский элемент, там уже прописано flex: 1 1 0 для равного размера
Пример HTML

<div class="gallery">
					<div class="gallery_group">
						<div class="fotorama" data-fit="cover" data-nav="thumbs" data-loop="true" 
						data-maxwidth="100%" data-maxheight="300px" data-flexible="true">
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						</div>
					</div>
					
					<div class="gallery_group">
						<div class="fotorama" data-fit="cover" data-nav="thumbs" data-loop="true" 
						data-maxwidth="100%" data-maxheight="300px" data-flexible="true">
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						</div>
					</div>
					
					<div class="gallery_group">
						<div class="fotorama" data-fit="cover" data-nav="thumbs" data-loop="true" 
						data-maxwidth="100%" data-maxheight="300px" data-flexible="true">
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						</div>
					</div>

Пример CSS

.gallery {
	display: flex; 
	max-width: 100%;
	align-items: stretch;
}

.gallery_group {
	flex: 1 1 0;
	padding: 16px;
}

Answer 3

[stepa83]

Решение в том, чтобы потомкам блока flex выставить

.gallery_group {
   min-width: 0px;
}

Или любое значение, отличное от auto