仅当弹性项目达到其最小宽度时，才使其换行

Question

所以我有这个：

.menu {
display: flex;
align-items: center;
justify-content: center;
/* flex-wrap: wrap; → I want this only when the children reach their min-width, to avoid horizontal scrolling */
}
.menu-title {
flex-shrink: 0;
}
.menu-item {
flex: 0 1 auto;
min-width: 10rem;
}
.menu-link {
padding: 0 1rem;
}
/* Demo purpose */
html,
body {
margin: 0;
padding: 0;
}
.menu {
margin: 2rem;
}
.menu-title {
margin-right: 1rem;
}
.menu-link {
display: flex;
position: relative;
text-decoration: none;
align-items: center;
}
.menu-icon {
display: block;
width: 2em;
height: 2em;
flex-shrink: 0;
margin-right: 0.5em;
background-color: #eee;
}

<div class="menu">
<div class="menu-title">Menu:</div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry</span></a></div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A very very very very long menu entry that is should be on two lines</span></a></div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A quite long menu entry</span></a></div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry that is a bit longer</span></a></div>
</div>
<div class="menu">
<div class="menu-title">Menu:</div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A two items menu entry</span></a></div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">I should have put some lerem ispum at a moment right?</span></a></div>
</div>
<div class="menu">
<div class="menu-title">Menu:</div>
<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry, but yeah you got it</span></a></div>
</div>

我希望弹性项目完全符合它们现在的行为方式：只有一行，在需要时收缩，因此文本在 2 行上，并在它们可以达到正常的"内联"宽度时增长。

但是它们有一个min-width，可以在一个点上创建水平滚动。在这一点上，我希望最后一个继续一个新的行：我想要wrap行为，但不是在它们达到最小宽度之前，因为我希望它们在之前缩小。

我设法让它工作的唯一方法是在.menu上添加一个换行并允许项目增长，但是当只有一个项目时，渲染不正确(我仍然希望最大宽度是内容宽度)。 https://jsfiddle.net/joanva/9zgn3hcm/30/(首字母：https://jsfiddle.net/joanva/9zgn3hcm/)

Answer 1

得了！

设置要包装的.menu，并允许项目增长+添加max-width: fit-content;即可实现。
内在尺寸有点尖端，但优雅的退化ftw。

https://jsfiddle.net/joanva/9zgn3hcm/33/

Answer 2

你所描述的是网格的完美用例。

css 看起来像这样：

.menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-gap: 1rem;
}

这将设置您的网格，以便它将尝试"自动调整"列，在均匀分布 (1fr) 和最小列宽 (10rem) 之间拉伸它们。如果它无法将内容放在一行上，因为它们会低于最小宽度，它会将多余的内容移动到新行上。

这是一个 jsfiddle 示例。您可以尝试手动添加一些额外的菜单项，看看会发生什么：https://jsfiddle.net/547hq0Lb/4/