防止表内的div扩展超出父级的大小

Question

我正在处理一个页面，我需要一个表格，如果表格比父表格宽，那么它将在父div中水平滚动。

不幸的是，我正在构建此平台的平台将我的代码放在父表单元格中，这打破了这一点。似乎即使我将我的表放在div中（并在该div上设置overflow-x: scroll），平台插入的父表单元格也会扩展超过页面的大小以包含子项。

我在这里看到了这样的小提琴： http://jsfiddle.net/d3e9esL5/

...以及我想要这个看起来像这里的一个小提琴（没有外表）： http://jsfiddle.net/4budchj6/

显然删除外部表修复了这个问题，但遗憾的是由于我正在研究的平台，我无法做到这一点。如果我可以避免将样式应用于外表，那也是最好的，因为该标记不在我的控制之下。

有没有什么方法可以按照我想要的方式设置这个样式而不改变外表的标记或样式？

Answer 1

使用overflow-x时，您还必须指定max-width（或width）。

如果你写这样的话：

.flex-table {
    overflow-x: auto;
    max-width: 250px;
}

您的表格不会超过250px，只有在需要时才会显示水平滚动条。