yecril

inline block content in a flex container not displaced

Internet Explorer incorrectly positions inline block content inside a flex container. The element gets positioned but its content does not. Here is an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Microsoft Internet Explorer incorrectly handles display flex</title>
<style>
.C {
display: flex; flex-direction: row
}
.I {
position: relative;
}
.L {
position: relative;
left: 1.5em;
border: solid red thin
}
.L span {
display: inline-block;
}
</style>
</head>
<body>
<div class="C"><div><p>[</div><div>
<p><span class="I">
<span class="L">
<span>*</span></span>
</span ></div><div><p>]</div></div>
</body>
</html>

This thread is locked. You can follow the question or vote as helpful, but you cannot reply to this thread.

Replies (6)

CanemSpiritus16

<!DOCTYPE html>
<title> ewww chuckle </title>

<style id=S onload="setTimeout('S.sheet.deleteRule(0)')">
    .C>*, div.C { display: inline-block }
             .C { display: flex; flex-direction: row }
             .I { position: relative }
             .L { position: relative; left: 1.5em; border: solid red thin }
        .L span { display: inline-block }
</style>

<div class=C>

    <div>
      <p>[</p>
    </div>

    <div>
      <p>
        <span class=I>
          <span class=L>
            <span>*</span>
          </span>
        </span>
      </p>
    </div>

    <div>
      <p>]</p>
    </div>

</div>

------------------------------------------------------------

<!DOCTYPE html>
<title> ewww chuckle </title>

<style onload="var load=function(style){
                   var Lspan=document.querySelector('.L span'),
                       f=function(){ style.sheet.deleteRule(0) },
                       g=function(evt){evt.target==this && f(f()) }
                   Lspan.addEventListener('transitionend',g)
                   f()
                 }.bind(null,this)
                 if (document.readyState=='complete') load()
                 else window.addEventListener('load',load)">

        .L span { color:transparent }
        .L span { transition:color .001ms }
    .C>*, div.C { display: inline-block; opacity:0 }

             .C { display: flex; flex-direction: row }
             .I { position: relative }
             .L { position: relative; left: 1.5em; border: solid red thin }
        .L span { display: inline-block }
</style>

<div class=C>

    <div>
      <p>[</p>
    </div>

    <div>
      <p>
        <span class=I>
          <span class=L>
            <span>*</span>
          </span>
        </span>
      </p>
    </div>

    <div>
      <p>]</p>
    </div>

</div>

.
.

visit the only spam-free link that exists on ms-Answers

https://prunemaster.github.io/snippets/IE/IE-sniff.html

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

yecril

I reported the problem to MDN.

Christopher Yeleighton

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

CanemSpiritus16

It's a great bug. I enjoyed it very much.

The two code samples in my previous post are workarounds for it.

The trick is to defer applying flex until after the container's css is already evaluated without it.

The first snippet uses style.onload + setTimeout for that purpose.

The 2nd takes a more definite approach. Instead of setTimeout, it sets up a css transition in the most deeply nested element. Then applies the flex after getting the transitionend event.

.
.

visit the only spam-free link that exists on ms-Answers

https://prunemaster.github.io/snippets/IE/IE-sniff.html

2 people were helped by this reply

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

CanemSpiritus16

btw. maybe someone on MDN will have interest. I had to remove checks for readyState=='interactive' and delay triggering the transition until the window 'load' event. instead of 'DOMContentLoaded'. due to Firefox 62 bugs.

(modify the 2nd sample with those parameters and see the transition events are unreliable with FF)

that's almost as bad as IE, which doesn't fire style.onload until after window load event.

.
.

visit the only spam-free link that exists on ms-Answers

https://prunemaster.github.io/snippets/IE/IE-sniff.html

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

yecril

I saw your posts, I just find code puzzles not helpful. Thank you 🙂

Christopher Yeleighton

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

yecril

In reply to deleted message

Fix published, credit given. Your retribution was disproportionate, as JavaScript is undecidable 🙂

Christopher Yeleighton

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

Question Info

Last updated August 17, 2020 Views 2,095 Applies to:

inline block content in a flex container not displaced

Replies (6) 

Question Info

Related Forums

Replies (6)