Flex + overflow

Constraining element into its parent

by roge roge

HTML

<h3>
Flex container resizable constraining a DIV: 
</h3>
<div class="Master">
	<div id="parent-1">
		Parent-1 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: 400px; 
	max-height: 100px; 
	resize: vertical;
	overflow: auto;
}
	
#parent-1 {
	background-color: #faa;	
	overflow: auto; // Make the difference
}