Flexbox在768px-922px宽度下超出同为flex布局的父容器问题

问题成因 #

1. 视窗宽度处于768px~991px区间时，.container被固定为750px宽度，扣除左右15px内边距后可用宽度仅720px，需要同时分配给左侧标题和右侧导航栏，导航栏可分配的空间不足。
2. 导航项的<a>标签左右内边距各设置了40px，4个导航项仅内边距就占320px，再加上文字宽度、右侧搜索框的30px左外边距+50px自身宽度，总宽度超出导航栏可分配空间，就会从右侧溢出。
3. 断点逻辑存在冲突：min-width:767px的规则隐藏了汉堡菜单，max-width:768px的规则隐藏了导航列表，768px宽度下会出现导航区完全空白的问题。

解决方案 #

方案1（更推荐，适配常规响应式交互逻辑） #

调整导航断点，让992px以下宽度都使用汉堡菜单，直接避免中等宽度下导航项挤不下的问题，修改两处媒体查询即可：

/* 原min-width:767px改为992px，仅桌面端隐藏汉堡菜单 */
@media (min-width: 992px) {
  nav .menu{
    display: none;
  }
}
/* 原max-width:768px改为991px，992px以下默认隐藏导航列表 */
@media (max-width: 991px) {
  nav ul{
    display: none;
  }
  nav ul.clicked{
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    top: 20%;
    left: 0;
    background-color: rgba(0,0,0,.3);
  }
}

方案2（保留中等宽度下的全量导航展示） #

如果需要在768px~991px区间也展示全部导航项，新增媒体查询压缩导航的内边距和字号即可：

@media (min-width: 768px) and (max-width: 991px) {
  /* 缩小导航项内边距和字号 */
  nav ul li a {
    padding: 30px 20px;
    font-size: 1.6rem;
  }
  /* 缩小搜索框左外边距 */
  nav .search {
    margin-left: 15px;
  }
  /* 修复flex子元素自动撑开问题 */
  nav {
    min-width: 0;
  }
}

内容的提问来源于stack exchange，提问作者Ahmed Abd Alfttah