css - 仅当 flex 元素达到最小宽度时才换行

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>

我希望 flex 元素与它们现在的行为完全一样:只有一行，在需要时缩小，所以文本在 2 行上，并在它们可以达到正常的“内联”宽度时增长。

但是他们有一个 min-width , 在一个点上创建一个水平滚动。在这一点上，我希望最后一个换行:我想要 wrap行为，但不是在它们达到最小宽度之前，因为我希望它们之前缩小。

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

Answer 1

明白了!

设置 .menu包装，并允许元素增长 + 添加 max-width: fit-content;做到了。
内在尺寸为 kinda cutting edge但优雅的退化ftw。

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