<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<style>
#scrollable {
    overflow: scroll;
    background: pink;
    height: 300px;
    width: 300px;
    box-sizing: border-box;
    display: flex;
    padding: 100px;
}
#item {
    width: 300px;
    height: 300px;
    background: salmon;
    flex-shrink: 0;
}
</style>
<div id=log></div>
Tests that padding bottom on a flexbox works in the face of overflowing content.
Padding-right does not work. This matches the Blink/WebKit display:block behavior.
Unfortunately, IE and Gecko both lose the padding bottom and the padding right.
<div id="scrollable" data-expected-scroll-height=500 data-expected-scroll-width=400>
    <div id="item"></div>
</div>
<script>
checkLayout('#scrollable');
</script>