У меня есть flexbox-контейнер, который должен содержать два элемента.Оба они могут иметь динамическое содержимое, что означает, что высота не может быть указана.
Максимальная высота контейнера должна составлять 400 пикселей, а максимальная ширина - 300 пикселей.Если высота двух элементов должна быть больше 400 пикселей, должна появиться полоса прокрутки.На оси X никогда не должно быть полосы прокрутки.
Вот мой код:
body {
width: 300px;
height: 400px;
display: block;
}
.container {
display: flex;
flex-direction: column;
overflow-y: auto;
height: 100%;
border: 1px solid violet;
}
.element1 {
flex-shrink: 0;
width: 100%;
}
.element2 {
background-color: lightblue;
flex-shrink: 0;
}
.subelement {
height: 600px;
}
<div class="container">
<div class="element1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
</div>
<div class="element2">
<div class="subelement">Reply</div>
</div>
</div>
Это прекрасно работает в Chrome, вот результат:
Этоне работает в IE 11, здесь результат:
По какой-то неизвестной причине первый элемент занимает столько горизонтального пространства, сколько возможно, ипоявляется горизонтальная полоса прокрутки.
Любой совет, как получить такое же поведение в IE 11, как у нас в chrome?
Вот работающий plunkr:
http://plnkr.co/edit/nJiXeFHzFzL2L5DsRJvi?p=info