html - 为什么外部 div 不会扩展到其内容的宽度？

Question

我的页面的一部分有以下 div 结构。当页面呈现时，我看到 contentDiv 的宽度小于 texArea 元素。当我在 Chrome 的开发者工具中查找元素时，contentDiv 的宽度为 239px，尽管 textArea 的宽度为 550px。

问题:当外部 div 没有提及宽度和高度的样式时，为什么外部 div 不采用其内容的宽度，我如何确保外部 div 总是更大比内部 div 尺寸？

<div id="contentDiv">
 <asp:Label ID="lblCodeType" runat="server" Font-Bold="true" Font-Size="Large"></asp:Label>
   <div>
    <asp:TextBox ID="txtCode" runat="server" TextMode="MultiLine" Rows="15" Width="550" Height="500" Font-Size="Small" Font-Names="consolas,sans-serif"></asp:TextBox>
       <div id="runCode" style="width:80%"">
                    <input type="button" value="Run above code" onclick="runCode(); return false;" id="btnRunCode" /><br />
                    (NOTE: Uncomment the code that you want to run, and comment what you don't want to run. DO NOT run multiple popup code at the same time; for example do not uncomment radalert as well as radconfirm code before running the code, but only have either radalert or radconfirm uncommented.)
        </div>
  </div>
</div>

更新 1

外层div的父级CSS如下。

element.style {
    height: 516.667px;
}
div#radWindow1_C {
}
.RadWindow_MetroTouch .rwContent {
    background-color: #fff;
    border: 0;
}
.RadWindow .rwContent {
    padding: .41667em .83333em;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
}
user agent stylesheetdiv {
    display: block;
}

更新 2

经过一些研究，我想出了 2 个解决方案。我不明白为什么 CSS 会这样(可能是因为对来自此 ASP.Net 页面中其他元素/div 的许多 CSS 规则的复杂应用)，但这两种解决方案中的任何一种都解决了我的问题。

解决方案 1:contentDiv 需要像表格或表格行或表格单元格一样显示，即 display CSS 属性需要table 或 table-row 或 table-cell。

<div id="contentDiv" style="display:table">
 <asp:Label ID="lblCodeType" runat="server" Font-Bold="true" Font-Size="Large"></asp:Label>
   <div>
    <asp:TextBox ID="txtCode" runat="server" TextMode="MultiLine" Rows="15" Width="550" Height="500" Font-Size="Small" Font-Names="consolas,sans-serif"></asp:TextBox>
       <div id="runCode" style="width:80%"">
                    <input type="button" value="Run above code" onclick="runCode(); return false;" id="btnRunCode" /><br />
                    (NOTE: Uncomment the code that you want to run, and comment what you don't want to run. DO NOT run multiple popup code at the same time; for example do not uncomment radalert as well as radconfirm code before running the code, but only have either radalert or radconfirm uncommented.)
        </div>
  </div>
</div>

解决方案 2:使用 JavaScript 和/或 jquery，contentDiv 的所有 DOM 级别的所有后代都需要解析宽度和高度，以便最大宽度和最大高度在其后代中可以确定。然后我们只需要将 contentDiv 的宽度和高度设置为这些最大值加上一些边距。这在下面的代码中显示。

function pageLoad() {
            var max_width = 0;
            var max_height = 0;
            var element_width = 0;
            var element_height = 0;
               $("#contentDiv").find("*").each(function () {
                    element_width = parseInt($(this).width());
                    if (element_width > max_width) {
                        max_width = element_width;
                    }
                    element_height = parseInt($(this).height());
                    if (element_height > max_height) {
                        max_height = element_height;
                    }
                });
               if ($("#contentDiv").width() < max_width) {
                   $("#contentDiv").width(max_width + 10);
               }
               if ($("#contentDiv").height() < max_height) {
                   $("#contentDiv").height(max_height + 10);
               }
}

Answer 1

可能有一些设置了宽度的父元素:

<div style="width: 280px;">
  <div>
    This div has a width of only 280px, even without having any style vinculated.
    <textarea style="width: 550px"></textarea>
  </div>
</div>