2

With this structure

<div id="twitter">
  <div class="info">
    <div>
      <span>Tweets</span>
      <span class="count">561</span>
    </div>
    <div>
      <span>Followers</span>
      <span class="count">250</span>
    </div>
    <div>
      <span>Following</span>
      <span class="count">129</span>
    </div>
  </div>
</div>

and this CSS

#twitter {
  width: 220px;
  padding: 10px;
  background: #10A4FA;
}
.info {
  display: flex;
  justify-content: space-around;
}
.info span {
  font-size: 14px;
}
.info span.count {
  font-size: 24px;
}

it displays like the top in IE11 and most browsers, but like the bottom in IE10 (emulated in IE11 devtools)

enter image description here

Here is a codepen showing it.

I've tried adding max-width: 100% to .info, various box-sizing and flex-grow things, and adding the ms prefixes but I can't get it to behave in IE10

binaryfunt
  • 6,401
  • 5
  • 37
  • 59
  • Could you add a
    after your span? I've also found that sometimes I have to set widths on the flex items which add up to 100% to get them working in old IE.     – kthornbloom Sep 02 '16 at 17:32
  • @kthornbloom adding `
    `s does kind of work (it seems to have the same effect as `.info span { display:block; }` for some reason) but the positioning of the 3 divs is slightly different as a result     – binaryfunt Sep 02 '16 at 18:02
  • IE10 supports a previous version of the flexbox spec and requires *vendor prefixes*. See here for details: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Sep 02 '16 at 21:45
  • @Michael_B Yes, but that doesn't seem to be the problem here. If you turn on autoprefixer in Codepen, it doesn't fix it. I've updated the question to clarify this – binaryfunt Sep 03 '16 at 17:51

1 Answers1

1

try this 

.info > div{
 width: 33.33%
{

its because flex width to items does support in IE10. so give it width to 33.33%

rmarif
  • 548
  • 4
  • 12
  • This does kind of work, but it changes the positioning of the 3 divs slightly (compared to how it should normally look in eg IE11) – binaryfunt Sep 02 '16 at 18:06