Рассмотрим следующий фрагмент:
.container {
display: flex;
align-items: center;
flex-direction: column;
border: 3px solid red;
}
.action {
flex-basis: 100%;
flex-shrink: 1;
width: 100%;
}
.button {
font-size: 12px;
line-height: 3rem;
width: 100%;
}
<div class="container">
<div class="action">
<button class="button" type="button">
Button label 1
</button>
</div>
<div class="action">
<button class="button" type="button">
Button label 2
</button>
</div>
</div>
В Chrome кнопки отображаются вертикально, и контейнер растёт по размеру:
![Chrome](https://i.stack.imgur.com/lyvEv.png)
Но в IE11 кнопки перекрываются, и контейнер остается меньше 1 кнопки:
![IE11](https://i.stack.imgur.com/Hb6Ew.png)
Это известная ошибка в IE?(если да, указатель будет оценен)
Есть ли известный обходной путь?