title: How to I make a child element's min-width/max-width ignore the parent element width?
body: <p>I have a grid column with a tooltip in it, but for this example, let's just call it a parent div and a child div.</p>
  
  <p>For design resigns, the child div has to have min-width/max-width set.  If the parent div's width is greater than the child div's min-width, then everything is good, the child div behaves as you would think, stretching to fill up to the max-width point, if needed.</p>
  
  <p>But if the parent div's width is <strong>less</strong> than the child div's min-width, then the child div's width will not stretch past its min-width point.</p>
  
  <p>Is it possible to make the child div ignore the width of the parent, while still keeping it a child (I cannot move this out of the parent, which I know would be an easy solution)? </p>
  
  <p>Here is a simple example of what I'm trying to do:</p>
  
  <pre><code>&lt;style&gt;
      .grid-column {
          border: 1px solid red;
          width: 100px;
          height: 100px;
      }   
  
      .tooltip {
          border: 1px solid green;
          min-width: 200px;
          max-width: 500px;
      }
  &lt;/style&gt;
  &lt;div class="grid-column"&gt;
      &lt;div class="tooltip"&gt;
          I want this div to stretch out to the max width, and still be flexible if the viewport is shrunk down. blah blah blah blah blah blah blah blah blah blah blah blah
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/vEMzPw" rel="nofollow">And here is a codepen with the example above</a>  </p>
  
  <p>Any help is appreciated, thanks!</p>