无法为最外面的容器分配宽度

Question

在下面的代码段中，我想为跨度指定最大宽度％10，这样它将占据最外层容器div的最大％10，实际上是体宽的100％。

但我想因为容器的宽度由内容决定，它似乎是包含无限制文本的跨度宽度的10％。

如何获得所需的输出？

jsfiddle链接：https://jsfiddle.net/68ha60p6/

firstname

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

Answer 1

对于跨度的宽度，请使用max-width:10vw;代替max-width:10%;

1vw等于视口（浏览器窗口）宽度的1％。