На 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. Как увидеть баг? Хочу понять его, чтобы при верстке учитывать и верстать правильно.
Простой
Простой
