如何将div扩展为大于父级

Question

我正在制作基于浏览器的视频游戏。 在游戏中，对象具有图形和标题栏。 标题栏包含其名称，当前正在施放的咒语，施放完成百分比和咒语图标。 对象具有由服务器确定的大小（尺寸）。

我想将标题栏附加到对象。 我希望标题栏显示图标，并在其中插入咒语名称。 如果拼写图标宽度+拼写名称宽度>对象宽度，我想水平拉伸标题栏（最好将其居中放置在对象上）

我目前看到的行为是，拼写名称将一直保持内联，直到拼写名称宽度+拼写图标宽度>对象宽度，此名称将出现在下一行，而不是拉伸标题栏（并且我可以如果不大，请尝试将其居中）。

解决方案可能包括javascript，因为游戏循环将使用javascript更新对象，包括位置，大小，图形，拼写图标，拼写名称和演员完成百分比。

“超级容器”是对象。 “容器”是标题栏。 因此，当“第一”和“第二”足够大时，我希望“容器”的宽度大于“超级容器”的宽度。 “所有”图标的大小相同，因此“第一”的大小是固定的。

<div class="supercontainer">
  <div class="container">
    <div class="first"></div>
    <div class="second">Words are long</div>
  </div>
</div>

的CSS

.supercontainer {
   position: absolute;
   left: 10px; /* example */
   top: 10px; /* example */
   width: 64px;
   height: 64px;
   background-color: black;
 }

 .container {
   min-width:100px;
   background-color: red;
 }

 .first {
   height: 20px;
   width: 20px;
   background-color: blue;
   display: inline-block;
 }

 .second {
  background-color: green;
  display: inline-block;
}

这是指向JSFiddle的链接： http : //jsfiddle.net/ch901rL2/3/

Answer 1

如下更改container CSS规则将使其子代保持1行。

.container {
  min-width:100px;
  background-color: red;
  white-space: nowrap;
  display: inline-block;    /* this make containter grow with children */
}

Answer 2

尝试将您的.container元素更改为此：

.container {
  min-width:100px;
  background-color: red;
  display: inline-block; //adding this will allow it to grow according to the text
}

另外， 添加 white-space: no-wrap; 到所需的元素，例如.second 。