溢出：自动 - 没有右填充和边距，铬答案

【问题标题】：overflow: auto - no right padding & margin, chrome溢出：自动 - 没有右填充和边距，铬
【发布时间】：2015-09-29 20:35:31
【问题描述】：

问题是父 div 中没有右边距，子 div 中没有右边距。我正在使用铬。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Template</title>
</head>
<body>
    <div style = "padding: 50px; overflow: auto; width: 300px; height: 300px; background-color: red;">
        <div style = "width: 500px; height: 500px; background-color: green;"></div>
    </div>
    <hr />
    <div style = "overflow: auto; width: 300px; height: 300px; background-color: red;">
        <div style = "margin: 50px; width: 500px; height: 500px; background-color: green;"></div>
    </div>
</body>
</html>

【问题讨论】：

标签： overflow padding margin

【解决方案1】：

我找到了填充的解决方案，不幸的是它不适用于边距：

.container {
  overflow: auto;
  width: 300px;
  height: 150px;
  background-color: red;
}
.padding {
  float: left;
  padding: 50px;
}
.content {
  width: 500px;
  height: 500px;
  background-color: green;
}

<div class="container">
  <div class="padding">
    <div class="content"></div>
  </div>
</div>

【讨论】：