title: absolute position child div max-width not working properly
body: <p>I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div <code>.dropdown</code> (grey colored) appears whenever the parent div <code>.content-small</code> (green colored) is hovered upon. Please note, that I have used the <code>.max-width</code> property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.</p>
  
  <p>Now, what I want to do is that I want to increase the max-width of the child div <code>dropdown</code>. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.</p>
  
  <p>I know that this can be resolved by replacing <code>max-width</code> with only <code>width</code> in the <code>.dropdown</code> class. But if I do that, then the child div <code>dropdown</code> will not scale with the browser window. So in any case, I have to use <code>.max-width</code> property for all divs.</p>
  
  <p>I also don't want to use media queries at this stage. In totality, this is what I am looking for:</p>
  
  <ol>
  <li><p>I want to increase the width of the dropdown child div <code>.dropdown</code>, I also want it to be scaled along with the browser windows like all other div's (max-width)</p></li>
  <li><p>I don't want to use media queries at this stage, since I am trying to practice with plain CSS</p></li>
  <li><p>I don't mind if the <code>.dropdown</code> div DOES NOT remain the child of the parent <code>.content-small</code> (if  a possible solution needs it that way)</p></li>
  </ol>
  
  <p>Would appreciate a solution for this.</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>* {
    box-sizing: border-box;
  }
  
  a {
    color: rgba(0,0,0,1);
    text-decoration: none;  
  }
  
  a:hover {
    color: rgba(0,0,255,1); 
  }
  
  html, body {
    margin: 0px;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,1);
    padding: 0px;
  }
  
  .wrapper {
    height: 600px;
    max-width: 960px;
    margin-left: auto;
    left: 0px;
    top: 0px;
    background-color: rgba(204,204,204,1);
    margin-right: auto;
    position: relative;
    padding: 0px;
    margin-top: 0px;
  }
  
  .content {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    max-height: 200px;
    max-width: 600px;
    background-color: #FFF;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    left: 0px;
    right: 0px;
    font-size: 32px;
    text-align: center;
    border: 3px solid rgba(0,0,0,1);
    border-radius: 15px 15px 0px 0px;
    width: 100%;
  }
  
  .content-small {
    max-width: 100px;
    height: 100%;
    max-height: 50px;
    background-color: rgba(0,255,204,1);
    position: relative;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid rgba(0,0,0,1);
    top: 5px;
  }
  
  .content-small:hover .dropdown{
    visibility: visible; 
  }
  
  .dropdown {
    box-sizing: border-box;
    width: 100%;
    max-width: 250px;
    height: 50px;
    background-color: rgba(214,214,214,1);
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid rgba(255,0,0,1);
    top: 47px;
    left: -3px;
    visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="content"&gt;
      &lt;div class="content-small"&gt;
        Home
        &lt;div class="dropdown"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>