Safari Flexbox:如果内容太高，导航不会从子目录获取高度

Safari Flexbox是指在Safari浏览器中使用Flexbox布局时的一个特性或问题。Flexbox是一种用于创建灵活的、自适应的布局的CSS模块，它可以方便地实现各种复杂的布局需求。

当使用Flexbox布局时，如果内容的高度超过了父容器的高度，一般情况下导航栏会从子目录获取高度并进行相应的调整，以适应内容的高度。然而，在Safari浏览器中，存在一个问题，即当内容的高度超过父容器时，导航栏不会从子目录获取高度，导致导航栏无法正确地适应内容的高度。

为了解决这个问题，可以采取以下措施：

使用min-height属性：可以给导航栏设置一个最小高度，以确保即使内容超过父容器高度，导航栏也能够展示出来。例如：

.navbar {
  min-height: 50px;
}

使用overflow属性：可以给父容器添加overflow属性，使得内容超出父容器高度时，可以通过滚动来查看全部内容。例如：

.container {
  overflow: auto;
}

使用JavaScript进行动态调整：可以通过JavaScript监听内容高度的变化，并动态调整导航栏的高度。例如：

const content = document.querySelector('.content');
const navbar = document.querySelector('.navbar');

function adjustNavbarHeight() {
  const contentHeight = content.offsetHeight;
  navbar.style.height = `${contentHeight}px`;
}

window.addEventListener('resize', adjustNavbarHeight);

总结： Safari Flexbox是指在Safari浏览器中使用Flexbox布局时的一个特性或问题，即当内容的高度超过父容器时，导航栏不会从子目录获取高度。为了解决这个问题，可以使用min-height属性、overflow属性或JavaScript进行动态调整。