sorry_i_noob
@sorry_i_noob

Как увидеть баг в IE 11 с vertical-align и min-height при верстке Flex'ами?

На caniuse (https://caniuse.com/#feat=flexbox) описан такой баг:
IE 11 does not vertically align items correctly when min-height is used see bug

Там есть ссылка на страницу сайта microsoft, но по переходу на нее меня редиректит на другую страницу.
Я хочу увидеть этот баг. Я сверстал простенькую страничку с таким кодом:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex</title>
</head>
<style>
  .flex {
    display: flex;
    min-height: 20px;
    background-color: yellow;
  }
  .child-1 {background-color: red;}
  .child-1:after {
    content: 'Привет';
    display: inline;
    vertical-align:super;
  }
  .child-2 {background-color: orange;}
</style>
<body>

<div class="flex">
  <div class="child child-1">You can control how excess space along a parent box's layout axis is proportionately distributed to child elements. </div>
  <div class="child child-2">By using the -ms-flex property, you can make flexbox items "flex," altering their width or height to fill the available space. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.</div>
</div>

</body>
</html>

И бага в IE11 я не вижу - vertical-align работает также, как в chrome. Как увидеть баг? Хочу понять его, чтобы при верстке учитывать и верстать правильно.
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы