LINUX.ORG.RU

Flexbox'ы в Chromium и Firefox выглядят по-разному

 , ,


0

1

В Chromium (53) выглядит нормально, как задумывалось, а в firefox (49) блок, в котором изображение, почему-то растягивается. Как можно пофиксить?

Вот часть css:

.блок { 
flex-flow: row nowrap; 
display: flex;
height: 100%; 
width: auto; 
}

.картинка { 
background: #000085;
display: flex;
width: auto; 
height: 100%; 
}

часть html:

<div class="блок">
<div class="картинка"><img src="картинка.png" width="auto" height="100%" /></div>
<div class="правая панель">

Firefox: https://pp.vk.me/c637319/v637319907/1c259/6M5Tru2jz3k.jpg

Chromium: https://pp.vk.me/c637319/v637319907/1c250/Ts-W-c7OgtY.jpg

★★

display: flex к родительскому элементу надо применять, а не ко всему подряд...

TikName
()
Ответ на: комментарий от anonymous

это для примера, чтоб понятнее было. Так то они на английском, разумеется

el-d ★★
() автор топика

а в firefox (49) блок, в котором изображение, почему-то растягивается

Это правильно, ибо родительский элемент - flex.

FIL ★★★★
()

Вообще, посоветую такую вот игру: http://flexboxfroggy.com/
Есть знакомые, кто по ней с flex разбирались. Говорят годно.

FIL ★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.