Content height is reduced with a smaller <div> - html

Question

I have created a dropdown menu. The basic process has been:
I put the dropdown link and submenus inside a div.
Using flexbox I put all the links inline and the submenus in a column.
With the visibility property I make the submenus appear.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_container {
width: 500px;
margin: 20px auto;
border: solid 2px green;
display: flex;
height: 400px;
}
div {
width: 110px;
display: flex;
flex-direction: column;
height: 40px;
}
a {
text-decoration: none;
color: white;
width: 90px;
text-align: center;
padding: 10px;
height: 40px;
background-color: red;
}
a {
flex-grow: 1;
}
div a {
width: 110px;
flex-grow: 0;
}
a:hover {
font-weight: bold;
background: blue;
}
.hidden {
visibility: hidden;
}
div:hover .hidden {
visibility: visible;
}
<nav class="main_container">
Enlace1
Enlace2
<div>
Enlace 3
Enlace 3.1
Enlace 3.2
Enlace 3.3
</div>
Enlace 4
</nav>
The key is to reduce the height of the div to 40px, because if you don't, hovering under "Link 3" will still cause the submenu to appear in a weird effect.
Well, when the div is reduced, in height, a value less than the height of the "Link 3" and submenus, curiously the height of these is reduced by 2px as you can see at the bottom of "Link 3".
Can this be avoided?

Answer 1

EDIT:
Changing your .hidden class to use the display property instead of visiblity is also a good idea here. visibility still allows the element to render and take up space on the page, which is why it can still be hovered why not visible. However, using display: none; makes it so the element does not render and cannot take up space on the page or be hovered.
Typically if you want to show/hide elements on a page you should use display: none;. visibility can have its uses, typically if you want there to an empty space/void where an element should be. Most of the time you actually want to use display instead.
Additionally, I added a :hover action to the div CSS so that it sets the height property to auto only when hovered. This avoids any unusual hover effects from the <div> taking up more space.
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
.main_container{
width:500px;
margin:20px auto;
border:solid 2px green;
display:flex;
height:400px;
}
div{
width:110px;
display:flex;
flex-direction:column;
height: 40px;
}
a{text-decoration:none;
color:white;
width:90px;
text-align:center;
padding:10px;
height:40px;
background-color:red;
}
a{flex-grow:1;}
div a{
width:110px;
flex-grow:0;
}
a:hover{
font-weight: bold;
background:blue;
}
.hidden{
display: none;
}
div:hover .hidden{
display: inline;
}
div:hover { height: auto; }
<nav class="main_container">
Enlace1
Enlace2
<div>
Enlace 3
Enlace 3.1
Enlace 3.2
Enlace 3.3
</div>
Enlace 4
</nav>

Answer 2

inside your css do this to your a element:
a {
text-decoration: none;
color: white;
width: 90px;
text-align: center;
padding: 10px;
background-color: red;
min-height: 40px;
max-height: 40px;
}
add a min-height and max-height and set it to 40px

Answer 3

You can try this. You need to use div {height:100%;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main_container {
width: 500px;
margin: 20px auto;
border: solid 2px green;
display: flex;
height: 400px;
}
div {
width: 110px;
display: flex;
flex-direction: column;
height: 100%;
}
a {
text-decoration: none;
color: white;
width: 90px;
text-align: center;
padding: 10px;
height: 40px;
background-color: red;
}
a {
flex-grow: 1;
}
div a {
width: 110px;
flex-grow: 0;
}
a:hover {
font-weight: bold;
background: blue;
}
.hidden {
visibility: hidden;
}
div:hover .hidden {
visibility: visible;
}
<nav class="main_container">
Enlace1
Enlace2
<div>
Enlace 3
Enlace 3.1
Enlace 3.2
Enlace 3.3
</div>
Enlace 4
</nav>