2016-03-02 2 views
1

У меня возникли проблемы с вложенным flexbox в Safari, IE11 & IE10. Предполагается, что панели должны быть бок о бок (ширина 50%) и иметь в них различное количество контента. Элемент <cite> должен быть привязан к нижней части панели, и каждая панель должна иметь одинаковую высоту.Элементы Flexbox свертываются в Safari, IE11 и IE10

Вот codepen для иллюстрации: http://codepen.io/anon/pen/BKNRBY

Это прекрасно работает в Chrome/Firefox, но в Safari, IE10 и IE11, панели не растягиваться по вертикали, чтобы содержать их содержание.

Может кто-нибудь предложить какие-либо советы?

+0

В качестве первого шага рассмотрите совместимость с браузером. Safari <9 и IE10 требуют префиксов поставщиков. В IE11 также есть проблемы, которые необходимо решить. http://stackoverflow.com/a/35137869/3597276 –

+0

Ручка использует autoprefixer для обработки префиксов поставщиков. – 8three

+0

Полезно знать. Это не было очевидно в коде. Ссылка, опубликованная выше, также содержит ссылки на общие ошибки и способы обхода браузера. –

ответ

3

Обнаружили это, переключив правило с flex-basis: 100% на flex-basis: auto на сделал трюк.

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