0

Здравствуйте, ув. вебмастера! Уже второй день ломаю голову и посторонние предметы, думая над вопросом: https://jsfiddle.net/sm8s9x0k/

Два элемента находятся во flex-контейнере c direction:column обоим задан flex-basis: 49% (стр.57 в примере). Внутри каждого из элементов лежит картинка, которая по задумке должна подстраиваться под размеры flex-элемента, который исходя из базиса занимает 49% родительского контейнера. Но такого не происходит, пока я не задам flex-элементу размер height: 49%; помимо свойства flex-basis.При этом картинке-дочке flex-элемента задано height:100%;

Объясните пожалуйста почему размер картинки-дочки не расчитывается от flex-basis? Верно ли в данном случае то решение, до которого дошел я? Ну и если не трудно объясните логику расчета размеров в данном случае, спасибо!

6
  • Не понятно описали проблему. Картинка распирает ячейку колонки из-за чего та становится больше положенного размера?
    – user31906
    21 сен 2017 в 8:41
  • Вы можете отключить строку №58 посмотреть на проблему. Реально ли поджать изображение под размеры flex-basis: 49%, не указывая помимо базиса height: 49%?
    – griff92
    21 сен 2017 в 8:44
  • 1
    Попробую наперед ответить: добавьте к img{max-width: 100%} и к .items__column-item{min-height: 0;}
    – user31906
    21 сен 2017 в 8:44
  • 1
    jsfiddle.net/sm8s9x0k/1
    – user31906
    21 сен 2017 в 8:52
  • Я Вас очень благодарю, но не могли бы вы объяснить мне логику работы всего этого?
    – griff92
    21 сен 2017 в 8:56

1 ответ 1

2

Если в дочерний флекс элемент положить длинную неразрывную строку, например "aaaaaaaaaaaa" (или в вашем случае большую картинку), то этот элемент растянется и за собой растянет флекс блок (из-за чего сломает задуманный вами лейаут)

Чтобы это исправить и на первое место в приоритет поставить размеры лейаута, а не его контент нужно для дочерних флексов указывать min-width: 0 (строчный флекс) min-height: 0 (колончатый флекс). Это решение с первого взгляда кажется хаком, но это поведение описано в спецификации и все нормально.

Подробнее здесь: https://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.