Изображение среди гибких элементов в ячейке сетки вызывает горизонтальное переполнение - PullRequest
Новая
       47

Изображение среди гибких элементов в ячейке сетки вызывает горизонтальное переполнение

1 голос
/ 12 апреля 2020

У меня есть простой дизайн сетки, с тремя строками и одним столбцом. В одной из строк я использую flexbox для горизонтального отображения 3 элементов. Я тестирую все это с различными размерами окон и в адаптивном режиме как в FF, так и в Chrome.

Когда все три элемента flex содержат div с текстом, все ведет себя как ожидалось. Когда я заменяю один элемент на img, я получаю нечто странное: я не могу уменьшить ширину окна ниже определенного порога, не вызывая горизонтального переполнения (появляется нижняя полоса прокрутки). Похоже, что он хочет сохранить определенное соотношение сторон.

Я сделал здесь кодовую ручку: https://codepen.io/mavromatika/pen/rNOVLdE

Попробуйте закомментировать img и раскомментировать <div>works</div> и изменение ширины окна. 

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.contenant-presentation {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: minmax(0, 1fr) 10fr minmax(0, 1fr);
}

.premiere-ligne {
  background-color: greenyellow;
}

.troisieme-ligne {
  background-color: greenyellow;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}

.troisieme-ligne div {
  /* height: 100%;*/
}

.troisieme-ligne img {
  max-height: 100%;
  width: auto;
}
<div class="contenant-presentation">
  <div class="premiere-ligne"></div>
  <div class="deuxième-ligne"></div>
  <div class="troisieme-ligne">
    <div>This</div>
    <div>works</div>
    <!--<img src="https://etc.usf.edu/clipart/65200/65255/65255_dipper_lg.gif">-->
    <div>fine</div>
  </div>

</div>
...