CSS Grid 导航栏缩小时如何让菜单内容保持在栏内？

结论

问题主要出在导航栏高度被限制为 4vh，而文字、图标和边框仍占据实际空间。align-items: center 只能在现有空间内对齐内容，不能把内容压缩到更小的高度；max-height: inherit 也不会缩小按钮中的文字或图标。浏览器缩放到 200% 后，CSS 视口空间可能发生变化，固定尺寸的内容就更容易溢出导航栏。

可以给导航栏设置一个有下限的最小高度，让它在内容需要时自然增高，同时重置标题的默认外边距。例如：

:root {
  --iconSize: 24px;
}

* {
  box-sizing: border-box;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 1;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;

  min-height: clamp(3.5rem, 8vh, 5rem);
  padding: 0.35rem 0.75rem;
  border: 2px dotted green;
  background-color: hsla(0, 0%, 0%, 0.5);
  color: white;
}

.nav h3 {
  margin: 0;
  line-height: 1.2;
}

.buttonWithIcon {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  gap: 0.35rem;
}

.iconMockup {
  width: var(--iconSize);
  height: var(--iconSize);
  background-color: red;
}

为什么 4vh 容易出问题

vh 根据视口高度计算。浏览器缩放后，布局视口的 CSS 尺寸可能变小，按 vh 设置的导航栏也会随之变矮。图标仍为 24px，文字也需要足够的行高，原代码中的 8px 边框同样会占空间。h3 的默认外边距还会增加内容所需的高度。

默认的 box-sizing 是 content-box。使用这种盒模型时，max-height 限制的是内容盒，边框会额外加在外面。它只规定最大高度，并不保证内容能放进导航栏。将全局盒模型设为 border-box，再让导航栏使用 min-height，能更直接地处理这些尺寸关系。

对齐设置怎么调整

.nav 是 Grid 容器，在容器上设置 align-items: center 就能垂直居中网格项目。.buttonWithIcon 内部也可以用 align-items: center 对齐图标和文字。子元素上的 align-content: center 通常解决不了这个问题，因为它控制的是网格轨道在容器中的分布，不会减少文字、图标或边框占用的空间。

如果左右按钮或公司名称在较窄的视口中互相挤压，可以缩短标签、减小间距，或在窄屏时调整导航栏布局。导航栏不能比文字、图标和边框所需的空间更矮。若必须使用较矮的导航栏，就需要相应缩小或隐藏部分内容。

额外检查

示例 HTML 中多次使用了相同的 id="innerContent"。页面内的 id 应保持唯一；如果这些元素需要共用样式，可以改用 class。这与导航栏高度问题没有直接关系。

备注：内容仅供参考。