У меня есть следующие CSS и HTML как минимум, чтобы воспроизвести проблему. На Chrome все хорошо. IE11 нет. Есть ли способ исправить CSS и HTML, чтобы он работал как в Chrome, так и в IE11?
<html>
<style>
.max-box {
background-color: #00e;
width: 100px;
max-height: 80%;
padding: 5px;
display: flex;
flex: 1 1 auto;
}
.fixed-box {
background-color: #00e;
width: 100px;
height: 100px;
padding: 5px;
display: flex;
flex: 1 1 auto;
}
.wrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.content {
background-color: #0e0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: auto;
}
.footer {
background-color: #e00;
display: flex;
flex: 0 0 auto;
}
</style>
<body>
<div class="max-box" style="float: left">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
<div class="max-box" style="float: left">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
<div class="fixed-box">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
</body>
</html>
Итак, требования к поведению Chrome:
- Поле 1 не будет занимать место ниже, если содержание мало.
- Блок 2 будет занимать не более 80% высоты браузера, а содержимое прокручивается. Отзывчив, если высота браузера меняется.
- Поле 3 имеет фиксированную высоту, а содержимое прокручивается и располагается на том же расстоянии, что и поле 2.
Что IE11 не удалось:
- Бокс 1 и Бокс 2 не позволяют прокручивать содержимое, если высота браузера меньше, чем содержимое.
- Контент Box 3 можно прокручивать, но все значения ограничены.