JohnGoodman/flexbox-vertical-scaleable-columns-with-overflow-body-content.html

## flexbox-vertical-scaleable-columns-with-overflow-body-content.html
<!-- Codepen: https://codepen.io/John-Goodman/pen/jOmEqqB -->

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Flex Test</title>
  <meta name="description" content="Flex Test">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    body {
      margin: 0px;
      padding: 0px;
    }

    .horizontal-flex-wrapper {
      display: flex;
      justify-content: center;
      min-height: 100vh;

      background-color: antiquewhite;
    }

    .vertical-flex-wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
      /* align-items: stretch; */

      /* width: 50vw; */
      width: 600px;
      /* padding: 30px; */
      background-color:plum;
    }

    .flex-column {
      /* padding: 30px;   */
    }

    .header {
      height: 60px;
      flex-shrink: 0;

      background-color: cornflowerblue;
    }

    .subheader {
      height: 30px;
      flex-shrink: 0;

      background-color: turquoise;
    }

    .body-content {
      flex-grow: 1;
      min-height: 200px;
      overflow-y: scroll;


      background-color: lavender;
    }

    .overflow-wrapper {
      border: 1px solid;
    }

    .footer {
      height: 60px;
      flex-shrink: 0;

      background-color: lightpink;
    }

  </style>

</head>

<body>

  <div class='horizontal-flex-wrapper'>
    <div class='vertical-flex-wrapper'>
      <div class='flex-column header'>Header</div>
      <div class='flex-column subheader'>SubHeader</div>
      <div class='flex-column body-content'>
        <p>Body Content</p>
        <div class='overflow-wrapper'>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
          <p>This text will take up too much space and will need to overflow</p>
        </div>
      </div>
      <div class='flex-column footer'>Footer</div>
    </div>
  </div>

</body>
</html>
	<!-- Codepen: https://codepen.io/John-Goodman/pen/jOmEqqB -->

	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Flex Test</title>
	<meta name="description" content="Flex Test">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>

	body {
	margin: 0px;
	padding: 0px;
	}

	.horizontal-flex-wrapper {
	display: flex;
	justify-content: center;
	min-height: 100vh;

	background-color: antiquewhite;
	}

	.vertical-flex-wrapper {
	display: flex;
	flex-direction: column;
	height: 100vh;
	/* align-items: stretch; */

	/* width: 50vw; */
	width: 600px;
	/* padding: 30px; */
	background-color:plum;
	}

	.flex-column {
	/* padding: 30px; */
	}

	.header {
	height: 60px;
	flex-shrink: 0;

	background-color: cornflowerblue;
	}

	.subheader {
	height: 30px;
	flex-shrink: 0;

	background-color: turquoise;
	}

	.body-content {
	flex-grow: 1;
	min-height: 200px;
	overflow-y: scroll;


	background-color: lavender;
	}

	.overflow-wrapper {
	border: 1px solid;
	}

	.footer {
	height: 60px;
	flex-shrink: 0;

	background-color: lightpink;
	}

	</style>

	</head>

	<body>

	<div class='horizontal-flex-wrapper'>
	<div class='vertical-flex-wrapper'>
	<div class='flex-column header'>Header</div>
	<div class='flex-column subheader'>SubHeader</div>
	<div class='flex-column body-content'>
	<p>Body Content</p>
	<div class='overflow-wrapper'>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	<p>This text will take up too much space and will need to overflow</p>
	</div>
	</div>
	<div class='flex-column footer'>Footer</div>
	</div>
	</div>

	</body>
	</html>