css - 弹性盒需要宽度才能正确调整大小

Question

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

Codepin 实际操作：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;
}

标签： cssflexboxwidth

Answer 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