即使父级溢出，Flex 孙子最小宽度也会使 flex 内容换行：auto答案

【问题标题】：Flex grandchild min-width makes flex content wrap even though parent has overflow: auto即使父级溢出，Flex 孙子最小宽度也会使 flex 内容换行：auto
【发布时间】：2021-09-15 23:08:54
【问题描述】：

在 flex 孙子上使用 min-width 时，我发现有些奇怪。

我正在尝试创建一个包含侧边菜单和内容的 flex 布局：[ Side | Content ] 但是，我希望 Content 的孩子可以滚动。当我向所述元素添加 min-width 时，flex 会换行，使Content 换行在Side 下，而不是彼此相邻。

我期望发生的是，由于父级具有overflow: scroll 与孙级 min-width > 父级的组合，孙子级会获得水平滚动。

发生的情况是 flex 内容换行了。

是什么原因造成的，我怎样才能将它们与孙子卷轴保持在同一行而不换行？

// All JS just for DEMO purposes - not related to question
document.querySelector('button').addEventListener('click', () => {
  const element = document.querySelector('.calendar > div');
  
  element.style.minWidth = element.style.minWidth === 'initial' ? '1000px' : 'initial';
})

.container {
  max-width: 550px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  background: cornflowerblue;
}

nav.col {
  background: salmon;
}

.calendar {
  overflow: auto;
}

/* Breaks wrap */
.calendar > div {
  min-width: 1000px;
}

<!-- START Just for demo -->
<button>Toggle element min-width</button>
<!-- END Just for demo -->

<div class="container">
  <div class="wrapper">
    <nav class="col">
      <ul>
        <li>Some navigation</li>
        <li>Some navigation</li>
        <li>Some navigation</li>
      </ul>
    </nav>

    <div class="col">
      <h1>page title</h1>
      <section class="calendar">
        <div>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</div>
      </section>
    </div>
  </div>
</div>

【问题讨论】：

标签： css flexbox

【解决方案1】：

您可以像下面这样更新您的代码：

// All JS just for DEMO purposes - not related to question
document.querySelector('button').addEventListener('click', () => {
  const element = document.querySelector('.calendar > div');
  
  element.style.minWidth = element.style.minWidth === 'initial' ? '1000px' : 'initial';
})

.container {
  max-width: 550px;
}

.wrapper {
  display: flex;
  /*flex-wrap: wrap;  remove */
  flex: 1 1 auto;
}

.col {
  /*flex-basis: 0; remove */
  flex-grow: 1;
  max-width: 100%;
  min-width:0; /* add */
  background: cornflowerblue;
}
.col:nth-child(1) {
  flex-shrink:0; /* disable the shrink for the first one */
}
nav.col {
  background: salmon;
}

.calendar {
  overflow: auto;
}

/* Breaks wrap */
.calendar > div {
  min-width: 1000px;
}

<!-- START Just for demo -->
<button>Toggle element min-width</button>
<!-- END Just for demo -->

<div class="container">
  <div class="wrapper">
    <nav class="col">
      <ul>
        <li>Some navigation</li>
        <li>Some navigation</li>
        <li>Some navigation</li>
      </ul>
    </nav>

    <div class="col">
      <h1>page title</h1>
      <section class="calendar">
        <div>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</div>
      </section>
    </div>
  </div>
</div>

【讨论】：

太棒了！这正是我希望实现的。我理解除了“最小宽度：0”部分之外的所有内容。为什么这会“神奇地”解决它？
@SølveTornøe 这里是关于最小宽度的详细说明：stackoverflow.com/a/36247448/8620333

【解决方案2】：

您已将.wrapper 设置为flex-wrap: wrap;，因此如果需要更多空间，它将环绕，当您将最小宽度设置得太高时就会出现这种情况。

我是否遗漏了什么，或者如果您明确不希望它环绕，为什么要将 flex-wrap 设置为 wrap？

【讨论】：