弹性盒需要宽度才能正确调整大小[重复]答案

【问题标题】：Flex box requires width for proper sizing [duplicate]弹性盒需要宽度才能正确调整大小[重复]
【发布时间】：2020-04-05 07:08:24
【问题描述】：

对包含三个框的主菜单使用 flex。第一个和第三个不弯曲，第二个增长到填充。第二个盒子是一个嵌套的 flex，它有两个盒子，第一个不弯曲，第二个增长到填充。嵌套的 flex，第二个框被配置为使用省略号进行溢出，但这不起作用。盒子展开并推动嵌套的 flex，但不是父 flex，超出父最大宽度。然后发现如果第二个框具有定义的宽度，任何值，甚至 1px，它都按预期工作。关心和好奇这是为什么，如果我做错了什么。

要查看实际操作的代码：https://codepen.io/nws-jholmberg/pen/mdyEyWq

<div class="menu-container">
  <div class="menu">
    <div class="menu-item-1 menu-item">X</div>
    <div class="menu-item-2 menu-item">
      <div class="menu-search">
        <div class="menu-item-search-1">X</div>
        <div class="menu-item-search-2">The search result goes here and does not fit</div>
      </div>
    </div>
    <div class="menu-item-3 menu-item">X</div>
  </div>
</div>
<br>
<div class="menu-container">
  <div class="menu">
    <div class="menu-item-1 menu-item">X</div>
    <div class="menu-item-2 menu-item">
      <div class="menu-search">
        <div class="menu-item-search-1">X</div>
        <div class="menu-item-search-2 add-width">The search result goes here and does not fit</div>
      </div>
    </div>
    <div class="menu-item-3 menu-item">X</div>
  </div>
</div>

.menu-container {
  background-color: #f00;
  max-width: 200px;
}

.menu {
  display: flex;
}

.menu-item {
  margin: 4px;
}

.menu-item-1 {
  flex: none;
}

.menu-item-2 {
  flex: 1;
  background-color: #0ff;
}

.menu-item-3 {
  flex: none;
}

.menu-search {
  display: flex;
}

.menu-item-search-1 {
  flex: none;
  background-color: #3A3;
  color: #fff;
}

.menu-item-search-2 {
  flex: 1;
  background-color: #3F3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
}

.add-width {
  width: 1px;
}

【问题讨论】：

你需要min-width: 0; on .menu-item-2，你可以去掉width:1px。您面临与最小宽度以及嵌套弹性盒如何考虑弹性基础相关的问题
添加了 2 个副本，第一个解释修复，第二个解释你的 width:1px 发生了什么（在错误部分）
谢谢，搜索了该信息，但这两个解决了为什么的问题。欣赏这些链接。

标签： css flexbox width

【解决方案1】：

您还可以使用另外 2 种无伤大雅的方法：

.menu-item-2 {
  flex: 1;
  background-color: #0ff;
  overflow:hidden;
}

或

.menu-item-2 {
  flex: 1;
  background-color: #0ff;
  min-width:0;
}

https://codepen.io/gc-nomade/pen/yLyJypm

【讨论】：