1

I am stuck on this issue for two days straight now and exhausted trying all possibilities. So I have simplified the jsfiddle example below. Basically I am trying to use stretch in IE 10, and its failing. When the #left-panel stretches the #wrapper does not stretch with it. I need both of these divs (#left-panel & #wrapper) to be equal heights at all time.

Any advice would help me greatly and I will be very thankful!

UPDATE!

Added the prefixes for IE (but still not working) 

body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#page-wrapper {
  background: tomato;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  height: 100%;
}
#left-panel {
  background: skyblue;
  width: 250px;
  height:2000px;
}
#wrapper {
  background: aquamarine;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
#header {
  height: 60px;
  background: lightblue;
}
#footer {
  height: 40px;
  background: lightgreen;
}
<body>

  <div id="page-wrapper">

    <div id="left-panel">
      panel should expand vertically
    </div>

    <div id="wrapper">

      <div id="header">
        Header should expand horizontally
      </div>
      <div id="main">
        content should expand vertically and horizontally
      </div>
      <div id="footer">
        Footer should expand horizontally
      </div>
    </div>

  </div>

</body>

Click to see what I am getting on IE

webkitfanz
  • 1,305
  • 1
  • 16
  • 29
  • IE 10 uses an obsolete version of the flexbox specification and requires vendor prefixes to work properly: http://stackoverflow.com/a/35137869/3597276 – Michael Benjamin Dec 28 '16 at 02:10
  • No, that's IE9. I just tried it with the prefix like you said...same result. – webkitfanz Dec 28 '16 at 02:14
  • IE8 and IE9 don't support flexbox at all. – Michael Benjamin Dec 28 '16 at 02:14
  • I just tried it again in IE10, not IE9 with the prefixes and its still failing. Any other suggestions? – webkitfanz Dec 28 '16 at 02:18
  • Take a minute to review the article I posted for you. You might find some useful info. For example, the `flex-grow` property isn't supported by IE10. Use the `flex` property instead. – Michael Benjamin Dec 28 '16 at 02:18
  • ok checking it out now. – webkitfanz Dec 28 '16 at 02:20
  • If you [**add the proper IE10 prefixes**](https://autoprefixer.github.io/), and [**use `flex` instead of `flex-grow`**](http://stackoverflow.com/q/32605593/3597276), you may be all set. – Michael Benjamin Dec 28 '16 at 02:22
  • I just tried that. It appears OK at first but then when you stretch the #left-panel the #wrapper does not stretch with it. – webkitfanz Dec 28 '16 at 02:28
  • FYI...the code above is now updated as per your suggestion. – webkitfanz Dec 28 '16 at 02:29
  • In testing your code in IE10 emulation, the left and right columns are equal height, and the right column stretches to match the left column. I don't see the problem. – Michael Benjamin Dec 28 '16 at 02:40
  • Try to increase the height of the left-panel dynamically you will see that the #wrapper will not stretch – webkitfanz Dec 28 '16 at 02:47
  • For instance add to #left-panel {height: 2000px} – webkitfanz Dec 28 '16 at 02:48
  • I also updated my question with a screenshot above to show what I am actually getting on my end. – webkitfanz Dec 28 '16 at 02:57
  • `#wrapper` was expanding fine. It was `#main` that was not expanding. Try this: https://jsfiddle.net/Lbkgj74m/3/ – Michael Benjamin Dec 28 '16 at 02:58
  • The code works perfectly on jsfiddle but as soon as I move it to test.html with everything from jsfiddle, I get the same issue. Also trying your new code it started to happen in chrome too. If you have some time, try taking everything from jsfiddle and pasting into a sperate HTML file on your local. The behavior is different. This is super weird.. – webkitfanz Dec 28 '16 at 03:09
  • Post a link to the web page if you can. – Michael Benjamin Dec 28 '16 at 03:10
  • I posted a link above this comment. Let me know if its working or I need to post it elsewhere. – webkitfanz Dec 28 '16 at 03:19
  • Try getting rid of the `height: 100%` on `#pageWrapper` (and also `body` and `html` elements). That may be limiting the ability to expand. Also makes sure to add prefixes to code I posted in my fiddle. I just provided a basic concept, not fully developed code. – Michael Benjamin Dec 28 '16 at 03:19
  • 1
    You sir are a brilliant and a handsome man!!! – webkitfanz Dec 28 '16 at 03:23
  • Ok, now I have another problem. :\ When I take of the height:100% the elements are not stretched to 100% of the page height. :( Is there another workaround? I tried 100vh but that does not work in IE (i get a gap under #left-panel) – webkitfanz Dec 28 '16 at 04:33
  • `min-height: 100vh` – Michael Benjamin Dec 28 '16 at 05:08
  • just tried that, added it to #page-wrapper, html, body, works well in Chrome but no IE – webkitfanz Dec 28 '16 at 05:21

0 Answers0