| <!DOCTYPE html> |
| <script src="../../resources/check-layout.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> |
| 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> |
