CSS宽度“死循环”不存在效果演示实例页面

CSS代码：

.box {
  display: inline-block;
  white-space: nowrap;
  background-color: #cd0000;
  text-align: left;
}
.text {
  display: inline-block;
  width: 100%;
  background-color: #34538b;
  color: #fff;
}
                

HTML代码：

<div class="box">
  <img src="1.jpg">
  <span class="text">红色背景是父级</span>
</div>