LayoutTests/css3/flexbox/overflow-and-padding.html - WebKit - Git at Google

 <!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>
	<!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>