Why is table not 100% of its parent div

Question

I have the following markup:

<div class="wrapper">
    <table>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
    </table>
</div>

And CSS:

.wrapper {
    height: 60px;
}

table {
    height: 100%;
    overflow: auto;
}

Here is fiddle. The problem is that table doesn't pick .wrapper's height of 60px. Why?

Answer 1

<table> is by default display: table.

Make it display: block.

Demo

.wrapper {
  height: 60px;
}
table {
  height: 100%;
  overflow: auto;
  display: block;
}

<div class="wrapper">
  <table>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
  </table>
</div>