1

I just created a website with a very simple design using Flexbox. With Firefox and Chrome, everything works fine but with IE, I have a tiny issue but quite visible. Here is the page: http://www.csharpnet.net/article/introduction. If you check it with Firefox, you'll see that the left aside has a 100% height, but with IE, it is not the case. I checked my CSS over and over and I don't know what to change.

I checked all parent element and they all have a 100% height, so why this aside has not this height as well ?

Thanks for your help.

EDIT: code example and fiddle with the code

<html style="height:100%;margin:0;">


<body style="height:100%;margin:0;">
    <div style="display:flex;flex-flow:column;height:100%;">



        <div style="background-color:green;flex-grow:1;flew-shrink:1;flex-basis:200px;display:flex;flex-flow:row;">
            <div style="background-color:yellow;flex-basis:700px;flex-grow:1;flew-shrink:1;"></div>
            <div style="background-color:white;flex-basis:100%;flex-grow:1;flew-shrink:1;"></div>
        </div>
        <div style="background-color:red;flex-grow:1;flew-shrink:1;flex-basis:100%;display:flex;flex-flow:row;">
            <div style="background-color:blue;flex-basis:500px;flex-grow:1;flew-shrink:1;"></div>
            <div style="background-color:gray;flex-basis:100%;flex-grow:1;flew-shrink:1;">
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
                <p>aaaa</p>
            </div>              
        </div>
    </div>

</body>

laconbass
  • 17,080
  • 8
  • 46
  • 54
ssougnez
  • 5,315
  • 11
  • 46
  • 79
  • Add the code, there is little we can do without it – eliteware Jan 19 '15 at 22:15
  • which version of IE? – Ankit Chaudhary Jan 19 '15 at 22:21
  • It is IE11 and for the code... Well, the CSS is on the site, so you can check with F12, it will be easier I think. But if you really prefer, I can copy/paste the CSS in here. – ssougnez Jan 19 '15 at 22:30
  • I just tried from scratch to see where was my error, here is my code: http://jsfiddle.net/zh2w6nfv/. As you can see, as long as you don't scroll down to see all the content, divs have the correct size but it does not grow with the content... – ssougnez Jan 20 '15 at 15:09

2 Answers2

1

I've taken your code and split the styling to a separate stylesheet, for the ease of troubleshooting. I've also cleaned it, fixed typo's (flex-flew) and removed unnecessary code.

Other than that I've used correct terminology and removed flexbox-capabilities where they aren't needed (e.g. flex: 1 1 200px; is basically the same as saying flex: 1; width: 200px; on a flex-element, but that's up to the individual).

What really did the trick though, was just removing the height: 100% and relying solely on flexbox.

Here's an updated fiddle: http://jsfiddle.net/uako2dsj/2/

Remember to prefix, to meet IE in a better way.

HTML

<body>
<div class="container">

    <div class="header">
        <div class="yellow"></div>
        <div class="white"></div>
    </div>
    <div class="content">
        <div class="blue"></div>
        <div class="gray">
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
            <p>aaaa</p>
        </div>              
    </div>
</div>
</body>

CSS

html, body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
}

.header {
    display:flex;
    height: 200px;

    background-color:green;
}

.yellow {
    width: 700px;

    background-color: yellow;
}

.white {
    width: 200px;
    flex: 1;

    background-color: white;
}

.content {
    display: flex;

    background-color: red;
}
.blue {
    width: 500px;

    background-color: blue;
}
.gray {
    width: 200px;
    flex:1;

    background-color: gray;
}
Matias Vad
  • 1,683
  • 1
  • 18
  • 28
0

I've recently run into this same behaviour and found a solution in this thread: How to make flexbox children 100% height of their parent?

It's the answer posted by "Brett Postin" using the "position:absolute; bottom:0" trick to create a full height container because "height:100%" doesn't work due to the flex box child not using explicit heights to determine its height.

Community
  • 1
  • 1
stealthwang
  • 915
  • 6
  • 8
  • I notice your question mentions your case only has problems in IE. The issue I mentioned would effect IE & Chrome, my apologies its probably unrelated. – stealthwang Jan 19 '15 at 23:23