Почему блок фиксированной ширины ломает flex верстку?

Question

[dev_guf]

Здравствуйте! Помогите разобраться. Есть макет построенный по flex технологии. Три колонки, 2 фиксированной ширины(правый и левый сайдбар) и контент резиновый. Все функционирует, и все работает хорошо. Но когда в контенте появляется блок фиксированной ширины, а ширина у него больше ширины контента, то верстка ломается и появляется горизонтальная прокрутка.

Вот как ломается верстка:


А вот как без этого блока:


Так же если прикрутить слайдер типа этого, верстка тоже ломается.

Вот так выглядит(хром)
https://jsbin.com/bovibeniga/edit?html,css,output

Answer 1

[Михаил Чирский]

Вы бы код выложили, мало ли что вы там наверстали.

Comments

[dev_guf]

Вот посмотрите в хром: https://jsbin.com/bovibeniga/edit?html,css,output

[dev_guf]

В сафари все нормально

[Михаил Чирский]

Не стал ковырять ваш код, вот рабочий пример, того, что вы хотели, разберитесь в технологии Flexbox, и используйте св-ва где они нужны, а не просто так
https://jsfiddle.net/7avn11uo/

[Михаил Чирский]

и конечно для старых версий Safari лучше использовать префикс -webkit-flex и т д. Если работаете с Sass то есть bourbon, замечательный инструмент, который облегчает нам жизнь