CSS constraining #4 in Resizable FLEX

Constraining element into its parent

by roge roge

HTML

<h3>
With CSS "oveflow" in Display: Flex container
</h3>
<div class="Master">
	<div id="parent-1">
		parent-1 width: 300px; height: 100px; overflow: auto;
		<p>Foo bar.</p>
		<p>Foo bar.</p>
		<p>Foo bar.</p>
		<p>Foo bar.</p>
	</div>

	<div id="parent-2">
		Parent-2 width: 300px; height: 100px;
		<p>Foo beer.</p>
		<p>Foo beer.</p>
		<p>Foo beer.</p>
		<p>Foo beer.</p>
	</div>
</div>

CSS

.Master {
	display: flex; padding: 10px;
	background-color: #afa;	
	width: 640px; 
	resize: auto;
	overflow: auto;
}
	
#parent-1 {
	width: 300px; height: 100px;
	background-color: #aaf;	
}
#parent-2 {
	width: 300px; height: 100px;
	background-color: #faa;	
	overflow: auto; // Make the difference
}