设置下拉菜单容器div高度后链接高度被压缩2px，如何解决？

你创建的下拉菜单实现逻辑如下：

• 将下拉链接与子菜单放入同一个<div>容器
• 利用Flexbox设置主菜单为行内布局、子菜单为列布局
• 通过visibility属性控制子菜单的显示与隐藏

设置<div>高度为40px可避免在"Enlace 3"下方hover时子菜单异常显示，但这会导致链接高度被压缩2px（可在"Enlace 3"底部观察到），以下是两种可行的解决方法：

方案一：用min-height替代固定height #

将包含下拉项的<div>的固定高度改为最小高度，这样容器默认保持40px高度，hover展开子菜单时可自动扩展高度，同时不会压缩子元素：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main_container {
  width: 500px;
  margin: 20px auto;
  border: solid 2px green;
  display: flex;
  height: 400px;
}

/* 修改此处：用min-height替代height */
div {
  width: 110px;
  display: flex;
  flex-direction: column;
  min-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;
}

方案二：给子元素添加flex-shrink: 0 #

如果必须保留容器固定高度，可给<div>内的链接设置flex-shrink: 0，禁止Flex容器压缩子元素的高度：

* {
  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;
}

/* 添加flex-shrink: 0 */
div a {
  width: 110px;
  flex-grow: 0;
  flex-shrink: 0;
}

a:hover {
  font-weight: bold;
  background: blue;
}

.hidden {
  visibility: hidden;
}

div:hover .hidden {
  visibility: visible;
}

说明：方案一更推荐，它既保留了hover前的布局高度，又能在展开子菜单时自动适配高度，避免布局冲突；方案二则适合必须固定容器高度的场景，但子菜单展开时会超出容器范围，需根据实际需求选择。

内容的提问来源于stack exchange，提问作者user19503612