包装和flex-grow的Flexbox问题：auto

Question

我正在努力解决我遇到的谜题。我希望有多个标签，可以是多行，以最佳方式填充整个宽度。对于哪个flex：auto工作得很好。然而，对于一些不相关和不可加工的情况，我也有带有柔性包装的容器：包裹和覆盖标签上方整个宽度的单个物品。

使用flex：auto和flex-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以外的任何地方实现。