Flex box whatsapp web structure

How to use flexbox to create a structure chat just like the way it looks the whatsapp web version as of february 2020

by heriberto perez

HTML

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

    <title>Flex box whatsapp web structure</title>
    <meta name="description" content="The whatsapp web distribution using flexbox">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="css/header_footer_sidebar_two_sides_columns.css?v=1.0">
  </head>

  <body>
    <div class="main-flex-container">
      <div class="flex-container-1">
        <div class="flex-header-1">
          Search group or contact
        </div>
        <div class="flex-content">
          <h1>
          an article blah blah blah
          asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah blah
          asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  2 an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf  an article blah blah blah  asdfasdf  asdf   asdf  3 an article blah blah blah
          </h1>

          <h1>
          an article blah blah blah
          asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah blah
          asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  2 an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah  asdfasdf  asdf   asdf  asdf  an article blah blah blah  asdfasdf  asdf   asdf  3 an article blah blah blah
          </h1>

          <h1>
          an article blah blah blah
          asdfasdf  asdf   asdf  1  an article blah blah blah  asdfasdf  asdf   asdf  asdf an article blah blah blah asdfasdf  asdf   asdf  asdf asdfasdf  asdf   asdf  1  an article blah blah...

CSS

html, body
{
    height: 100%;
    display: flex;
    background: red;
    margin: 0px;
}

.main-flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container-1, .flex-container-2 {
	display:flex;
  /* shorhand for flex-direction and flex-wrap */
	flex-flow: column nowrap;

  overflow: hidden;
}

.flex-container-1 {
  flex: 1;
}

.flex-container-2 {
  flex: 3;
}

.flex-header-1 {
  padding: 5px 5px 5px 10px;
	flex:none;
	background-color:lightblue;
	color: white;
  height: 3.7em;
}

.flex_footer{
  height: 100px;
	flex:none;
	background-color:lightgreen;
	color:black;
}

.flex-title {
  padding: 0px 5px 5px 10px;
  flex:none;
  background-color: pink;
  color:white;
  height: 4em;

}

.second-flex-footer {
  height: 50px;
	flex:none;
	background-color: gray;
	color: white;
}

.flex-content{
	flex: auto;
	background-color:lightyellow;
	overflow-y:auto;
}