html - div内的表溢出

Question

我有一个非常基本的 CSS 问题。我有一个固定高度的 div，我在那个 div 里面有一个表格。

除非 div 有滚动条，否则表格的内容将不适合 div。现在的问题是，表格的内容溢出了 div，因为它的高度超过了我在 div 上设置的高度。

这就是我为 Div 所拥有的

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

这是一个例子。

jsfiddle

如何让表格适合 div 并具有滚动条？这并不特定于任何浏览器。我自己在 Chrome 和 IE 中都试过了。

Answer 1

[编辑]引用您的请求：

如何让表格适合 div并有一个滚动条。

将以下内容添加到.test（小提琴）

overflow-y:scroll;

文档overflow-y

Answer 2

.test {
  background-color: gray;
  display: inline-block;
  float: left;
  max-height: 200px;
  overflow-y: scroll;
}
.matrix td, .matrix th{
  border: 0.1em solid #E2E2E2;
  padding: 4px 2px;
  min-width: 65px;
  white-space: normal;
  text-align: center;
}