flexを入れ子にしたら、孫要素がはみ出してしまう

Question

以下のようなhtmlを書いたのですが、x y zのdivが途中で切れてしまいます。
id=Bの要素のflexを0 0 60pxとすれば想定通りの表示になるのですが、ここはautoにしたいです。小要素は全て幅が確定しているのでid=Bの要素の幅も確定すると思うのですが、なんとかx y zが切れないようにする方法はありますでしょうか。

javascriptを使わず、cssだけで解決する方法を探しています。

<div style="background:silver;display:flex;overflow:hidden;">
  <div style="flex:1 1 0;background:gray;">A</div>
  <div style="flex:0 0 auto;display:flex;" id="B">
    <div style="flex:0 0 20px;">x</div>
    <div style="flex:0 0 20px;">y</div>
    <div style="flex:0 0 20px;">z</div>
  </div>
</div>

上記コードのサンプル

https://jsfiddle.net/tr749s2d/

Answer 1

これではダメでしょうか？

<div style="flex:0 0 auto;width: 20px;">z</div>

Answer 2

こんな感じでよろしいでしょうか？

いちおう要素Bはautoとの仕様なので、autoから子要素分の60pxだけcalc関数を使って引いただけです

Answer 3

    <div style="flex:0 0 20px;">x</div>
    <div style="flex:0 0 20px;">y</div>
    <div style="flex:0 0 20px;">z</div>

上記の部分がflexである必要がなければ以下のようにするといけると思います。

    <div style="display:inline-block;width:20px;">x</div>
    <div style="display:inline-block;width:20px;">y</div>
    <div style="display:inline-block;width:20px;">z</div>