Answer the question
In order to leave comments, you need to log in
How to see a bug in IE 11 with vertical-align and min-height in flex layout?
On caniuse ( https://caniuse.com/#feat=flexbox) this bug is described:
IE 11 does not vertically align items correctly when min-height is used see bug
<!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>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question