Задать вопрос
@Thuban
html

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

Имеется div с параметром display: flex, внутри 3 одинаковых по ширине блока с параметрами flex: 1 1 0 (для того, чтобы они были равного размера), если внутри каждого из flex-блоков вставить изображения с параметром width: 100%, то блоки остаются одинакового размера, несмотря на то, какие изображения используются, а если вставить в эти блоки fotorama-карусель, то размеры flex-блоков сбиваются и они выходят за пределы родительского. Как можно выравнять эту карусель?5d24a9201e239400202658.png
  • Вопрос задан
  • 247 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ответы на вопрос 3
Mesuti
@Mesuti
Есть пример кода?

Попробуйте 
.gallery_group {
width: 100%
}
Ответ написан
Комментировать
Комментировать
@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;
}
Ответ написан
Комментировать
Комментировать
@stepa83
Решение в том, чтобы потомкам блока flex выставить
.gallery_group {
   min-width: 0px;
}

Или любое значение, отличное от auto
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы