为什么滚动不考虑填充

Question

我有一个div和padding: 20px;和overflow: auto;（绿色区域），其中包含一个表。这两个元素都设置为box-sizing: border-box。

为什么右侧的溢出区没有显示滚动条？ div（表格）的内容一旦超过绿色区域，就会出现滚动条，就像没有实际填充一样。

Answer 1

这是因为溢出与父容器的宽度和高度有关。内部填充不视为溢出，因为未超出元素的宽度或高度。一旦孩子超出了父母的边界，它将被视为溢出。

要创建所需的行为，您需要将div包裹在填充的table内的div周围，并将overflow属性设置为新的div

示例：

.padded {
    padding: 20px;
}

.overflowing {
    height: 100%;
    width: 100%;
    overflow: auto;
}

<div class="padded">
    <div class="overflowing">
        <table>...</table>
    </div>
</div>

希望有帮助！