<h1>An example of CSS Size Containment <br><br>Box A and B have a <code>min-height:100px</code> value and an <code>img</code> child element <br>Box B also has <code>contain:size</code></h1>
<section>
	<div class="box">
		<p>Box A</p>
		<img src="https://images.unsplash.com/photo-1614121181207-4b6c334d353d?q=100&w=400"/>
	</div>
	<div class="box">
		<p>Box B</p>
		<img src="https://images.unsplash.com/photo-1614121181207-4b6c334d353d?q=100&w=400"/>
	</div>
</section>
<small>Credit: Photo by NASA, via Unsplash</small>

.box {
	width: 100px;
	min-height: 100px;
	border: 2px grey dashed;
	img {
		border-radius: 4px;
		margin-left: 20px;
		width: 200%;
	}
	&:nth-of-type(1) { 
		float: left; 
	}
	&:nth-of-type(2) { 
		float: right; 
		contain: size; 
	}
	p {
		text-indent: 10px;
	}
}
h1 {
	--fsz: 18px;
	font-size: var(--fsz);
	font-weight: normal;
	text-align: center;
	code {
		font-size: calc(var(--fsz) - 2px);
		font-weight: bold;
	}
}
section {
	width: 400px;
}
body {
	font-family: 'crimson text';
	height: 100vh;
	display: grid;
	row-gap: 30px;
	place-content: center;
	place-items: center;
	margin: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}