包装和 flex-grow 的 Flexbox 问题：自动

Question

我正在为自己遇到的一个难题而苦苦挣扎。我想要有标签，可以是多行的，以最佳地填充整个宽度。对于哪个 flex: auto 效果很好。但是，对于一些不相关且不可更改的情况，我还拥有带有 flex-wrap: wrap 的容器和一个覆盖选项卡上方整个宽度的单个项目。

使用 flex: auto 和 flex-wrap: wrap flex 项目不再尝试通过包装其内容文本来适应宽度 - 它们都将其放在一行中，如果不适合则换行。

我做了一个小提琴来说明它： https://jsfiddle.net/d67mgqvm/

<div class="flexbox">
  <div class="flexitem full">
    This is a desired behavior but it has to use a wrapper to prevent wrapping
  </div>
  <div class="wrapper">  
    <div class="flexitem">
      Content can be different so I have to use flex: auto so it has more space for longer texts
    </div> 
    <div class="flexitem">
      Like I said, it can be short like this one
    </div>
  </div>
</div>

<div class="flexbox">
  <div class="flexitem full">
    This doesn't work, even though it can fit in all the content if it wraps text inside items
  </div>  
  <div class="flexitem">
    Content can be different so I have to use flex: auto so it has more space for longer texts
  </div> 
  <div class="flexitem">
    Like I said, it can be short like this one
  </div>
</div>

我一直在考虑是否有可能在没有包装器的情况下做到这一点。看起来像 flex-basis: min-content 应该是这样的，但它只适用于 FF...

Answer 1

嗯，它看起来像 flex-basis: min-content 是我正在寻找的，不幸的是它还没有在除 Firefox 之外的任何地方实现。