最も外側のコンテナに対する幅を割り当てることができません

Question

以下のスニペットでは、スパンに最大幅％10を割り当てて、最も外側のコンテナdivの100％実際のボディ幅の％。

しかし、コンテナの幅はコンテンツによって決まるので、制限のないテキストを含むスパンの幅の10％のようです。

希望の出力を得るにはどうすればよいですか？

jsfiddleリンク：スパンの幅についてhttps://jsfiddle.net/68ha60p6/

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    padding:0; 
 
    margin:0; 
 
    }

<div style="float:right; height:100%;padding-right:1%"> 
 
<button style="display:inline-block; height:70%;background-color:green; color:white;border:none; padding:0;"> 
 
<span style="display:inline-block; max-width:10%; text-overflow:ellipses;overflow:hidden; max-height:100%;text-align:center;white-space:no-wrap;">John John</span> 
 
</button> 
 
</div> 
 
</div>

Answer 1

、代わりmax-width:10%;

1vwのmax-width:10vw;を使用するには、ビューポート（ブラウザウィンドウ）幅の1％に等しいです。