padding-bottomとoverflowを同時指定するとpadding-bottomが無視される件について

詳細はここ
http://stackoverflow.com/questions/29986977/firefox-ignores-padding-when-using-overflowscroll


FireFoxやIEだとoverflow(auto, scroll)とpadding-bottomを指定した親ボックスより、中身のコンテンツが大きいと、padding-bottomが消える問題

これは、overflowの仕様の関係で、ChromeはContent-boxに中身のコンテンツがClippingされるのに対し、FFやIEだとpadding-boxにClippingされるため

解決策としては、afterを使った方法が提示されている

.parent-box {
  overflow: auto;
  padding: 20px;
  /* 親ボックスのpadding-bottomを解除 */
  padding-bottom: 0;
}
.parent-box:after {
  content: "";
  display: block;
  /* after要素で疑似的にpadding-bottomを再現 */
  height: 20px;
}

もっとスマートな方法がありそうだけど、とりあえず…