title: div not expanding as per the inner content width
body: <p>My html page has a container, a left div and a right div. Both of left and right div are enclosed within the container, having width as 20% and 80% respectively. </p>
  
  <p><strong>The Problem</strong></p>
  
  <p>In <code>#right</code> div I have a <code>fieldset</code> who's <code>width</code> is set as <code>auto</code>. This <code>fieldset</code> have two html elements of class <code>.form-label</code> and <code>.form-input</code> both having a equal width of <code>48%</code>. The problem is that if one of my label has large text (not larger than the space available in right div and with respect to all rules) than the fieldset is only expanded upto a particular width and after that my label and input element instead staying on same line are moved into two different lines. This happens even if there is still the space for the div to expand. </p>
  
  <p><strong>Note:</strong> I want to point out that even though the issue is applicable to both firefox and chrome but, the issue is more visible in chrome even with mid lenght of text as given in the example.</p>
  
  <p>Here is the code: <strong>[Please see the output at fullscreen to understand the issue]</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container
  {
      box-sizing: border-box;
      max-width: 100%;
      position:relative;
      float:bottom;
      height: 100%;
      margin: 6rem 0 1.5rem 0;
      overflow-x: auto;
      clear: both;
      display: -webkit-flex;  
      display: -ms-flexbox;  
      display: flex;
      flex-wrap:nowrap;
      flex-basis:0;
      align-items:stretch;
      justify-content: center;
     
  }
  
  #left{
      margin: 0;
      width:20%;
      padding: 4px 4px 4px 4px;
      color: #000011;
      font-weight:bold; 
      text-align: center;
      order:0;
      flex-order: 0;
      -webkit-order: 0;
      -ms-flex-order: 0;
      align-self:stretch;
  }
  
  #right{
      margin-top: 0;
      width: 80%;
      padding: 4px 4px 4px 6px;
      text-align: center;
      flex-order: 1;
      order:1;
      -webkit-order: 1;
      -ms-flex-order: 1;
      align-self:stretch;
      overflow: auto;
  }
  .form{
      text-align:right !important;
      
  }
  
  .form-input{
      width:48%;
      margin-left:0.5rem !important;
      margin-bottom: 0.5rem !important;
      vertical-align: middle;
      display: inline-block;
      text-align: left;
  }
  .form-label{
      width:48%;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
      vertical-align: super ;
  }
  .form-button{
      width:auto;
      margin-top: 1rem;
  }
  
  fieldset{
      width: auto;
      max-width: 100%;
      display:inline;
      margin: 1rem auto 2rem auto;
      border-radius: 0.5rem;
      border: 3px double #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div id="left"&gt;
       blah blah balah blah blah.......
     &lt;/div&gt;
  
    &lt;div id="right"&gt;
      &lt;fieldset class="form"&gt;
              &lt;legend class="fit-title-blackgrad"&gt;Defaulter List Selection&lt;/legend&gt;
              &lt;div&gt;
                  &lt;label class="form-label"&gt;Select Semester&lt;/label&gt;
                  &lt;select class="form-input selecttodiv" name="dsem" id="dsem" tabindex="1" required=""&gt;&lt;option value=""&gt;------&lt;/option&gt;&lt;option value="I"&gt;I&lt;/option&gt;&lt;option value="II"&gt;II&lt;/option&gt;&lt;option value="III"&gt;III&lt;/option&gt;&lt;option value="IV"&gt;IV&lt;/option&gt;&lt;option value="V"&gt;V&lt;/option&gt;&lt;option value="VI"&gt;VI&lt;/option&gt;&lt;option value="VII"&gt;VII&lt;/option&gt;&lt;option value="VIII"&gt;VIII&lt;/option&gt;                &lt;/select&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label class="form-label"&gt;From (Month)&lt;/label&gt;
                  &lt;select class="form-input" name="dfmonth" id="dfmonth" tabindex="2" required=""&gt;&lt;option value=""&gt;------&lt;/option&gt;&lt;option value="7"&gt;July&lt;/option&gt;            &lt;/select&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label class="form-label"&gt;Cut-Off Percentage........................&lt;/label&gt;
                  &lt;input class="form-input" type="number" min="50" max="75" name="dcutoff" id="dcutoff" tabindex="4" value="75" required=""&gt;
                  
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="submit" class="button form-button" value="Load"&gt;
              &lt;/div&gt;
                      
             &lt;/fieldset&gt;
    
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have gone through various post, however I am unable to find a solution.</p>
  
  <p>I hope somebody helps me here.</p>
  
  <p>Thanks in advance for any help.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Let me explain in detail what is happening exactly.</p>
  
  <p>The width of <code>#right</code> container is 1071px in fullscreen. <code>fieldset</code> which is the container of form elements in <code>#right</code> div is an <code>inline</code> element, because I don't want it to occupy fullscreen but, in case if it have that much content. Hence <code>fieldset</code> can occupy <code>max-width</code> of <code>100%</code>. Now the total <code>width</code> of <code>fieldset</code> is distributed equally among <code>.form-input</code> and <code>.form-label</code> (viz <code>width:48%</code>). Both of the said element is enclosed in the div which does not have any css property assigned to it except <code>overflow:hidden;'. Hence considering the width of 1066px, each of</code>.form-input<code>and '.form-label</code> should be able to occupy maximum width of <code>511px</code>. But this does not happen in mycase. </p>
  
  <p>If you see the given example in full screen. You will find that even if the total space of 1066px available in <code>#right</code> div. My <em>cut-off percentage...</em> label occupy only <code>272px</code> and the corresponding input occupies around <code>229px</code>. This two elements appears on two different line even though they should appear on same line. Also the sum of their <code>width's+margins+paddings+borders=524px</code> which is much less than the total space available i.e. 1066px. Even if I add padding,margin and border of <code>fieldset</code>, the total width comes out to be 550px.</p>
  
  <p>So my question is that why does the fieldset does not expand as per the width of its inner content and what could i do to overcome this without hampering my site layout.</p>
  
  <p><strong>Note: I don't want label to break into separate line, so <code>display:inline-block;</code> alone is not an option in this case. I had also tried setting <code>white-space:nowrap</code> but, this lead to truncation of my string i.e it keeps flowing towards right until it is made hidden by coming input element at right.</strong></p>
  
  <p><strong>min-width<code>and</code>max-width` are removed because it does not serve any purpose as i have realized while discussing the problem with @Ankush</strong>    </p>