Почему у фото не реагирует на указание размера в Хромиуме?

Question

[Полина Емельянова]

Добрый день, коллеги!
Прошу, помогите вспомнить, как победить браузерный баг в Хромиуме:

САБЖ:
Есть некий флекс-контейнер в котором лежит фото и div с описанием, текстовка, короче.
Фото задан flex: 1 1 200px;
Текстовке - flex: 1 1 300px;

ПРОБЛЕМА:
Данный код работает только в ФФоксе. В Хромиуме управлять размером фото - не получается. Растягивает в полный размер фото.

Код ниже
https://codepen.io/emelyanova/pen/BrXNZp

.media {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  img {
    flex: 0 1 100px;
  }
  .media-body {
    flex: 1 1 200px;
  }
  
}

Автопрефиксер - работает.

Что я делаю не так?

Заранее большое спасибо!!!

Comments

[Poltr]

flex basis не работает с img надо заменить на width

Answer 1

[Одиночка Айс]

Собсна, зачем тут флексы?

Если всего лишь 1 строка:

.media{
    display:inline-block;
    font-size:0;
}
.media img{
    width:100px;
    display:inline-block;
}
.media .media-body{
    line-height:75px; //занимаемая картинкой высота
    font-size:14px;
    vertical-align:top;
    display:inline-block;
}

Если на несколько строк (добавляем в .media-body вложенный тег, например p):

.media .media-body{
    //line-height убираем
    height:75px; //занимаемая картинкой высота
}
.media-body p{
    width:150px; //ширина произвольная естесна
    transform:translateY(-50%);
    position:relative;
    top:50%;
}

Единственный минус - требуется знать высоту, но, скорее всего, она и так фиксированная по дизайну.

P.S. В ФФ ваш пример тоже не работает, с Хромом выглядит одинаково

Answer 2

[Dima Polos]

flex: 1 1 200px означает, что элемент должен занимать все свободное пространство, но не менее 200пкс, при этом если 200пкс есть у него, и рядом есть еще элемент он с ним строку разделит. Поэтому фото и описание поделят свободное пространство, при этом фото заберет сначала 200пкс, описание - 300пкс, а что останется разделят поравну и к своим основным размерам добавят. Попробуйте у фото убрать flex-grow.

Answer 3

[Odisseya]

Здравствуйте. Похоже, это происходит из-за сложности вычисления пропорций при отсутствии начального размера "холста" для изображения. Если задать на самом изображении: <img width="100" …> — ваш код должен работать.

Как вариант, можно прописать в стилях:

img {
    flex: 1 1 auto;
    width: 100px;
  }

Так мы зададим размер холста под изображение, а потом переопределим его через flex-basis.
NB закрывающй тег флекс-контейнера </a> — стоит дописать.