1

I am having an issue with some flexbox styling where all of the content of a flex-column are collapsing in on each other in IE. Any help on how to get this working in IE would be greatly appreciated.

I cannot change the flex: 1 1 0% to flex: 1 1 auto as most of the styling on the site makes use of the flex-basis: 0 to calculate sizing. 

.flex-container {
  display: flex;
}

.flex-container > * {
  flex: 1 1 0%;
  display: block;
  margin: 0.25em 0;
}

.flex-container > * > * {
  display: block;
}

.flex-vertical {
  flex-direction: column;
}
<div class="flex-container flex-vertical">
  <label for="input">
    Input
    <input type="test" name="input" />
  </label>
  
  <label for="textarea">
    Textarea
    <textarea></textarea>
  </label>
</div>

Correctly working in Chrome Not working in IE

Michael Sayers
  • 522
  • 1
  • 3
  • 12
  • have you tried running your CSS through autoprefixer? Depending on the version of IE you are trying to get it to work in flexbox will require `-ms-` prefixed properties, and in certain cases (IE10) different properties from the standard spec altogether https://autoprefixer.github.io/ – WillD Aug 09 '18 at 15:03
  • @WillD I have and I still get the issue. – Michael Sayers Aug 09 '18 at 15:07
  • In IE11 I got it to work by removing `flex: 1 1 0%;` from `.flex-container > *` ... I don't know why this works though. – WillD Aug 09 '18 at 15:52

0 Answers0