title: Filling height using css
body: <p>This is an age old question, although I wasn't able to find a solution that suited me.</p>
  
  <p>Given a DIV inside a table cell (TD), I want to fill the DIV's height to fit the TD</p>
  
  <pre><code>+-----------+
  |     TD    |
  |+---------+|
  ||   DIV   ||
  |+---------+|
  |           |
  +-----------+
  </code></pre>
  
  <p>Only gotchas are:</p>
  
  <ul>
  <li>I don't want to set the height of the parent TD </li>
  <li>I want to avoid using Javascript (prefer a CSS only solution)</li>
  <li>Keep the resizable nature of the contenteditable DIV</li>
  <li>Bonus: get it to work in IE8+ (cross browser solution)</li>
  <li>Bonus: use display:flex; - I couldn't work this out, but looks like it should do the trick.</li>
  </ul>
  
  <p>Too much to ask?</p>
  
  <p><strong>Example:</strong></p>
  
  <p>Get the "foo" DIV, to fill 100% height of their parent TD. I got something close to working, but having padding on the DIV element, throws out the borders (using Opera).</p>
  
  <pre><code>/* My Attempt: close, but the padding throws out the borders */
  div{
      display:inline-block;
      height:100%;
      width:100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nickg1/g5cpQ/5/" rel="nofollow">http://jsfiddle.net/nickg1/g5cpQ/5/</a></p>
  
  <p>Thanks!</p>