Dynamic height, flexbox

by rohilaharsh

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dynamic Container</title>
</head>
<body>
	<div class="one">
    One
		<div class="two">
    Two
			<div class="three">
      Three
				<div class="table">
          Table
					<div class="header">Table Header</div>
					<div class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure maiores corporis quisquam enim at nam earum non atque dolorum nulla quidem perferendis, porro eveniet! Quisquam, fugit ex aspernatur, aliquid necessitatibus amet aperiam pariatur facilis suscipit ea dolorum qui ratione assumenda eum minima. At a ullam magnam eveniet, hic sit quis dicta perferendis excepturi nemo voluptate ipsum doloremque expedita illo dolor voluptates culpa consequuntur quaerat porro reprehenderit ab alias! Maxime reprehenderit nihil doloribus exercitationem, cupiditate quasi dolorum voluptas repellendus vel fugit incidunt praesentium molestias modi numquam! Quo porro laudantium aperiam suscipit, molestiae quibusdam veniam cum nam fuga facere fugit quisquam distinctio!</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

html {
  height: 100%;
}

html, body, .one,.two,.three,.table {
  display: flex;
  flex-direction: column;
  
  /* important */
  overflow: hidden;
  
  flex: 1;
  margin: 0;
}

.body {
  width: 200px;
  overflow: auto;
}