CSSでoverflow:autoしたときにpadding-rightまたはpadding-bottomが効かない

overflow でスクロール可能なエリアを作った際、 padding が表示されない問題があったので少し無理やりかもしれませんが解決する方法を思いついたので紹介します。

横スクロール


<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  display: inline-block;
  padding: 1.4em;
  width: 250px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  width: 500px;
}

右にスクロールしていくと padding-right が描画されていないことが分かると思います。バグなのか仕様なのかは分かりませんが、一応解決策はあります。


.parent {
  display: inline-block;
  padding: 1.4em 0 1.4em 1.4em;
  width: 250px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  position: relative;
  width: 500px;
}
.child::before {
  position: absolute;
  top: 0;
  left: 100%;
  width: 1.4em; /* padding-right分 */
  height: 1px;
  content: '';
}

擬似要素 を使って padding-right 分の横幅を確保することで解決できます。

縦スクロール


<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  display: inline-block;
  padding: 1.4em;
  width: 250px;
  height: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  height: 500px;
}

縦スクロールの場合も同じような問題が起きます。縦スクロールの場合は Chrome では問題ありませんでしたが、 IE では padding-bottom が描画されませんでした。


.parent {
  display: inline-block;
  padding: 1.4em 1.4em 0;
  width: 250px;
  height: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  height: 500px;
}
.parent::after {
  display: block;
  width: 1px;
  height: 1.4em; /* padding-bottom分 */
  content: '';
}

擬似要素 を使って padding-bottom 分の領域を確保しています。横スクロールの場合は absolute で配置しましたが、縦スクロールの場合は単純にブロック要素で配置すれば大丈夫です。