S
S
sorry_i_noob2019-10-12 23:00:20
Flexbox
sorry_i_noob, 2019-10-12 23:00:20

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

There is a link to the microsoft site page, but when I go to it, it redirects me to another page.
I want to see this bug. I made a simple page with the following code:
<!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>

And I don't see a bug in IE11 - vertical-align works the same as in chrome. How to see the bug? I want to understand it so that I can take it into account and type it correctly when making layout.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question