Table inside div overflowing

Question

I have a very basic CSS question. I have a div with fixed height and I have a table inside that div.

The content of the table will not fit in the div unless the div gets a scrollbar. The problem is now, the content of the table is overflowing the div as its height is more than the height I set on the div.

This is what I have for the Div

 display: inline-block;
    float: left;
    max-height: 200px;

Here is an example.

jsfiddle

How do I get the table to fit in the div and have a scrollbar? This is not specific to any browser. I tried both in Chrome and IE myself.

Answer 1

[edit] Quoting your request:

How do I get the table to fit in the div and have a scrollbar.

Add the following to .test (fiddle)

overflow-y:scroll;

Documentation for overflow-y