css - 我如何将父 div 包装到子 div 的宽度(对话框)？

Question

Jsfiddle来证明我的问题。

我有一个 SPA(单页应用程序)。
在应用程序中，屏幕上会弹出几个对话框。
每个弹出窗口都有自己的宽度和高度。

对话框的标题和内容由angularJs添加我这里的问题是对话框的大小。

目前所有弹出窗口都是单独制作和添加的。我想将其更改为一个内容可变的弹出窗口。随之而来的问题是弹出窗口必须包装内容宽度。

示例(如 Jsfiddle 所示)

<div class="dialog">
    <div class="titlebar"></div>
    <div class="content">
       The content that is added has css that tells it has a width of 400px
       This means the dialog needs to wrap to this 400px
    </div>
</div>

如何仅使用 CSS 解决此问题？

---

弹窗变体的一些例子(虽然两者的宽度看起来一样，但实际情况并非如此)

Answer 1

为对话框使用display:table。

这是您的 Updated Fiddle.