flex布局孙子元素设置min-width触发父级换行 如何保留横向滚动不换行

• 你的flex容器.wrapper设置了flex-wrap: wrap，当两个flex子项的总宽度超过容器宽度时，就会自动换行。
• flex子项（两个.col）的默认min-width值为auto，该规则下flex项的宽度不会小于其内部内容的最小宽度。你给孙子元素.calendar > div设置了1000px的min-width，会把父级.col的最小宽度撑到至少1000px，加上侧边栏的宽度后总宽度远大于外层.container的550px最大宽度，直接触发了换行。
• 虽然你给.calendar设置了overflow: auto，但因为它的父级.col已经被内容撑大，没有出现宽度溢出的情况，所以滚动条不会触发。

只需要修改两处CSS即可实现需求：

1. 把.wrapper的flex-wrap: wrap改为flex-wrap: nowrap，强制两个子项保持在同一行
2. 给.col添加min-width: 0，允许flex项收缩到小于内容宽度，这样.calendar的overflow规则才会生效

修改后的完整CSS代码如下：

.container {
  max-width: 550px;
}

.wrapper {
  display: flex;
  flex-wrap: nowrap; /* 由wrap改为nowrap */
  flex: 1 1 auto;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  background: cornflowerblue;
  min-width: 0; /* 新增该行，允许flex项收缩 */
}

nav.col {
  background: salmon;
  /* 如果需要侧边栏固定宽度不被压缩，可添加flex: 0 0 200px; 自行调整数值即可 */
}

.calendar {
  overflow: auto;
}

.calendar > div {
  min-width: 1000px;
}

内容的提问来源于stack exchange，提问作者Sølve