<分区>
<分区>
对具有三个框的主菜单使用 flex。第一个和第三个不 flex ，第二个增长以填充。第二个盒子是一个嵌套的 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;
}
最佳答案
还有 2 种其他无害的方法可以使用:
.menu-item-2 {
flex: 1;
background-color: #0ff;
overflow:hidden;
}
或
.menu-item-2 {
flex: 1;
background-color: #0ff;
min-width:0;
}
关于css - Flex box 需要宽度才能适当调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59295313/