JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">


	<div class="column">
		<div class="article">article1</div>
		<div class="article">article2</div>
		<div class="article">article3</div>
		<div class="article">article4</div>
		<div class="article">article5</div>
		<div class="article">article6</div>
		<div class="article">article7</div>
		
	</div>
	<div class="column">col 2</div>
	<div class="column">col 3</div>

</div>

CSS

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.container
{
	display: flex;
	flex-direction: row;
	border: 2px solid black;
	overflow: scroll;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
}

.column
{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: grey;
	margin: 5px;
}

.article
{
	margin: 5px;
	background: white;
	height: 100px;
	border: 1px solid orange;
}