爲什麼外部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>