css - すべてのタグを収めるスペースがない場合に、タグのリストを 1 つの「タグ」アイコンにフォールバックできるようにする (CSS のみ)

Question

だから、ここに問題があります：

フレックスボックスで作成した行があります。2 つの列があります:十分なスペースがある
|some dynamic text | [dynamic tags]| 場合[dynamic tags]はタグのリスト、またはそれらすべてを収めるのに十分なスペースがない場合は
1 つのアイコンです。

私の現在のアプローチは、インライン ラインを作成する 2 つのアイテムを使用することです。スペースがない場合、一部が 2 行目に移動し、 で隠されoverflow: hiddenます。

以下に例を示します: http://jsbin.com/IVUyATO/13/edit

最初の列と 2 番目の列の展開係数を同じにするまでは、ほとんど問題なく動作します。そのため、スペースを均等に取ることができます。このように: http://jsbin.com/IVUyATO/15/edit

しかし、ここで修正する必要がある問題があります。タグが 2 番目の行に移動しても、2 番目の列にはまだスペースがあるため、最初のタグは目的のために目に見える空のスペースを使用しません。

たぶん、私が行方不明になっている、まったく異なる方法があります。

html本体はこちら

<div class="line">
  <div class="description-container">
    something 2 something 3 something 4
  </div>
  <div class="tags-container">
    <div class="more-tags">more tags</div>
    <div class="tags">
      <span>tag1</span>
      <span>tag2</span>
      <span>tag3</span>
      <span>tag4</span>
      <span>tag5</span>
      <span>tag4</span>
      <span>tag5</span>
      <span>tag6</span>
    </div>

  </div>
  <div class="right-container"></div>
</div>

body{
  width: 100%;
  padding:0;
  margin:0;
  background: white;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.line > div{
  flex: 0 0 auto;
}
.right-container{
  width: 100px;
  background: rgba(100,0,0,0.1);
}
.line .tags-container{
  flex: 1 1 auto;
  background: magenta;
  //TODO - Uncomment next line to see final effect
  /* overflow:hidden; */ 
  .more-tags{
    float:right;
    background: green;
    height: 50px;
    width: 80px;
  }
  .tags{
    float:right;
    background: yellow;
    white-space: nowrap;
    height: 50px;
    margin-right:-80px;
    .tag{
      display:inline-block;
      border-radius: 4px;
    }
  }
}
.line .description-container{
  background: rgba(0,0,200,0.1);
}

アップデート

私は別の問題を解決しようとしていることを理解したと思います。そして、それを説明する方法をすでに知っています。ここにあります- コンテナの半分よりも広い場合にのみフレックスボックスの縮小列を使用します