0

I'm having problems with my page layout on flexbox and wonder if anyone can help! I've got the below code in a JSFiddle here https://jsfiddle.net/smvrn7to/1/

I'm trying to make the div with the ID 'notheader' stretch to the bottom of the screen, but I'm having no luck. As I understand it if I use align-content:stretch on the "notheader" div should work, but I'm getting nothing.

I've tried changing the height to 100% as well, but again its made no difference.

body{
    background-color: blueviolet;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-content: stretch;
    height: 100%;
}

html{
    height: 100%;
}

nav{
    background-color: aqua;
    width: 80px;
    height: 100%;
}

main{
    background: yellow;
    width: 100%
}

header{
    height: 100px;
    background-color: teal;
}

#controls{
    background: tomato;

}

#notnav{
    width: 100%;
    background-color: chartreuse;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#notheader{
    background: white;
}
<nav>
    <p>Nav Bar</p>
</nav>
<div id="notnav">
    <header>Header</header>
    <div id="notheader">not header</div>
    <!-- <div id="controls">controls</div> -->
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
WillMaddicott
  • 512
  • 6
  • 20
  • Add `flex: 1` to `#notheader` – Asons Sep 07 '18 at 17:17
  • FYI, I've had trouble with using just `flex: 1` in IE. IE seems to think this should evaluate to `flex: 1 1 0`, but Chrome thinks it should be `flex: 1 1 auto`. Most of the time I need `flex: 1 1 auto`, so I find it necessary to always write out all three parts of the shorthand. – Joseph Marikle Sep 07 '18 at 17:19
  • @JosephMarikle That's Chrome's fault for not adhering to the spec and it is a bug. You will find many such bugs in Chrome over time. – TylerH Sep 07 '18 at 17:23
  • @JosephMarikle `flex-basis` is `auto` by default, cross browsers, it is the short hand `flex` that doesn't render the same value cross browsers ... the spec. say `flex: ` should render as `flex: 1 0`, which won't work the same in IE. IE need a unit for `flex-basis`. So when you say it should be `flex: 1 1 auto`, you are incorrect, and if you need it to be `auto`, you'll need to set all the 3 values, when using `flex`, or use their longhand properties. E.g. `flex-grow: 1` will make them to be `1 1 auto` by only change the _flex-grow_ property. – Asons Sep 07 '18 at 17:41
  • @TylerH It is IE that has issue with shorthand `flex`, not Chrome. It needs a unit for the `flex-basis` value, so when using `flex: 1` it won't play along as it should in all cases. `flex: 1` will set the value to `1 1 0` and IE wan't a unit for the `0` to behave. – Asons Sep 07 '18 at 17:49

0 Answers0