Why would an outer div not expand to the width of its contents?

Question

I have following div structure in a part of my page. When the page renders, I see that contentDiv has less width than the texArea element. When I looked up the elements in Chrome's developer tool, contentDiv had a width of 239px even thoughtextArea had a width of 550px.

Question: Why would an outer div not take the width of its contents, when the outer div has no style mentioned for width and height, and how would I make sure that outer div was always greater than inner div dimensions?

<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

The CSS for the parent of the outer div is as below.

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;
}

UPDATE 2

After some research I came up with 2 solutions. I couldn't figure out why CSS behaved this way (probably because of a complex application of many CSS rules coming from other elements/divs in this ASP.Net page) , but either of these two solutions solved my problem.

Solution 1: contentDiv needs to be displayed like a table or table-row or table-cell i.e. display CSS attribute needs to be either table or table-row or 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>

Solution 2 : Using JavaScript and/or jquery, all descendants at all DOM levels of contentDiv need to be parsed for width and height so that max width and max height among its descendants can be determined. Then we just need to set the width and height of contentDiv to these max values plus some margin. This is shown in code below.

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

        <!DOCTYPE html>
    <html>
    <head>
    <style>
    html,
    body {
      height: 100%;
    }
    .parent {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .center {
      background-color: #00FF00;
      width: 100px;
      height: 100px;
    }
    </style>
    </head>
    <body>
    
    
    
    <div class="parent">
      <div class="center"></div>
    </div>
    
    
    </body>
    </html>

Please find the best example for displaying child div to the parent div.

Answer 2

Probably, there is some parent element with a set width:

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