title: HTML Fieldset content overflows at 100% height (Chrome)
body: <p>I have a problem with the HTML <code>fieldset</code> element in Chrome.</p>
  
  <p>I want to have a fixed-height <code>fieldset</code>, and within it a scrollable <code>div</code>. Everything looks fine until I put a <code>legend</code> in - when I do so, the <code>div</code> spills out from the bottom of the <code>fieldset</code>. I also checked in Firefox, and it does not do this (i.e. does exactly what I would expect).</p>
  
  <p>Anyone else seeing this? Is it a Chrome bug? Anyone know if there is a hack for this?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;a&lt;/title&gt;
          &lt;style&gt;
              fieldset {
                  height: 80px;
              }
              fieldset div {
                  height: 100%;
                  overflow-y: scroll;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Test&lt;/legend&gt;
              &lt;div&gt;
                  Foo!&lt;br/&gt;
                  Foo!&lt;br/&gt;
                  Foo!&lt;br/&gt;
                  Foo!&lt;br/&gt;
                  Foo!&lt;br/&gt;
                  Foo!&lt;br/&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/CGQLg.png" alt="Screenshot"></p>