Overflow: hidden hides too much for element with explicit height - html

Question

In a mobile menu I've been playing with, I ran across a problem with jQuery's slideToggle animation being jumpy despite setting explicit widths and heights for the element. I found another potential fix to that problem was to set overflow: hidden on the toggled div. That's when I ran into this problem, which I assume is at least contributing to my slideToggle problem:
I noticed that setting overflow-y: hidden on my navigation seems to cut things off when it shouldn't. Given a nav that renders as 240px tall normally, if I set that nav to height: 240px; overflow: hidden, I would expect that there would be no overflow to hide. What actually happens is that it cuts off at around 102px in Chrome, and in Firefox it simply doesn't show up at all.
I have tried setting the CSS in the stylesheet and also dynamically in the JS by calculating the height of the nav's contents. I have tried clearfixing the nav. I have tried wrapping it in a div. I have tried various methods of display. Nothing seems to work.
My question is simple: What's up with the nav's height? What am I not understanding?
As a note, setting min-height does work, but that apparently interferes with the slideToggle effect and also doesn't really answer my question about why just using height won't work.
See http://codepen.io/cjl750/pen/xRdoRW for code.
$('header span').click(function(){
$('nav').slideToggle(400);
});
html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Answer 1

Flex items do flex by default. You can prevent shrinking with
nav {
flex-shrink: 0;
}
You can also use the flex shorthand property like flex: none or flex: 0 0 240px.
$('header span').click(function(){
$('nav').slideToggle(400);
});
html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
flex-shrink: 0;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Without overflow-y: hidden there was less shrinking due to Flexbox Implied Minimum Size.

Answer 2

Your problem seems to be the fact that you have flexbox on body.
This seems to be "confusing" the .slideToggle(), seeing as flexbox handles height in a very particular way (sort of dynamically adjusting height of flex-items to their respective rows).
Seeing as you're attempting to display a one-column layout, this is not necessary. You may just give alle direct children of body a width of 100%.
Here's a jsFiddle where it works: https://jsfiddle.net/1qrgg695/2/
I removed flex from body.
The header acted weird, so the header is now flex:
header {
display: flex;
justify-content:space-between;
}
The justify content makes sure the Title stays to the left and the Toggle to the right.