Chrome, Flexbox и fat div

Попытка понять flexbox лучше.Chrome, Flexbox и fat div

В Firefox этот фрагмент правильно обрабатывает левый столбец, но в правой колонке Chrome слишком широкий, а влево слишком тощий.

Как я могу заставить его работать с Chrome?

.child { 
 
    border: solid 1px; 
 
} 
 
.left { 
 
    width: 100px; 
 
} 
 
.container { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
}

<div class="container"> 
 
    <div class="child left"> 
 
    I'm left! 
 
    </div> 
 
    <div class="child right"> 
 
    And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! 
 
    And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and 
 
    fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right 
 
    and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm 
 
    right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! 
 
    </div> 
 
</div>

источник

2015-12-16 StragaSevera

добавить 'мин-ширина: 100px' в' .left' –

Хорошо, он работал. Но почему простая «ширина» работает в Firefox, а Chrome требует «min-width»? .. – StragaSevera

Вы можете назвать это ** freakin 'quirks браузера ** для стартеров. Для тестирования и разработки я бы посоветовал использовать Firefox Developer Edition, который близок к спецификациям W3. И для причуд вам просто нужно запомнить это решение, поскольку вы будете сталкиваться с ним снова и снова ... Пробовал IE еще? Ughhh. Я фактически прекратил использовать префиксы поставщиков. Пока все работает хорошо. (autoprefixer является лучшим, BTW) –

В Firefox этот фрагмент корректно обрабатывает левый столбец, но в Chrome правой колонке слишком широк и левый слишком худой.

На самом деле это не работает в Firefox. Вычисленная ширина .left в FF составляет около 84 пикселей, а не 100 пикселей.

И в Chrome это просто сжимается, чтобы соответствовать содержанию.

Очевидно, что разные браузеры обрабатывают минимальный размер элементов по умолчанию по-своему.

Ключевым решением является определение flex-shrink.

Вместо:

.left { width: 100px; }

Try:

.left { flex: 0 0 100px; } /* don't grow, don't shrink, width is 100px */

DEMO

Узнайте больше о flex собственности здесь:

источник

2015-12-16 04:33:04

Спасибо большое! Не заметил, что firefox сжимает колонку тоже = -) – StragaSevera

Chrome, Flexbox и fat div

ответ

Смежные вопросы