为什么外部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> 

UPDATE 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>