<rml>
<head>
	<title>Flex nested ref</title>
	<link type="text/rcss" href="../../style.rcss"/>
	<meta name="Reference" content="Reference implemented by wrapping the nested flex box in an extra div." />
	<style>
		#window {
			display: flex;
			width: 100%;
			height: 100%;
			overflow: hidden auto;
			flex-direction: row;
			justify-content: center;
			flex-wrap: nowrap;
		}
		.column {
			width: 40%;
		}
		.content {
			display: flex;
			height: 128px;
			text-align: center;
			flex-direction: row;
		}
	</style>
</head>

<body>
<div id="window">
	<div class="column">
		<div class="content">
			<div style="width: 20%; background: red;">1</div>
			<div style="width: 60%; background: green;">2</div>
			<div style="width: 20%; background: blue;">3</div>
		</div>
	</div>
	<div class="column">
		<div class="content">
			<div style="width: 20%; background: red;">1</div>
			<div style="width: 60%; background: green;">2</div>
			<div style="width: 20%; background: blue;">3</div>
		</div>
	</div>
</div>
<handle size_target="#document"/>
</body>
</rml>
