Flex minimal

This is an example of using flex for complex containers

by Vikas

HTML

<div id="content-wrap">
      <div id="content-a">
        Contenet A
      </div>
      <div id="content-b">
        <div>
          <h1>
            this is container B
          </h1>
          <h1>
            this is container B
          </h1>
          <h1>
            this is container B
          </h1>
          <h1>
            this is container B
          </h1>
          <h1>
            this is container B
          </h1>
          <h1>
            this is container B
          </h1>
        </div>
      </div>
    </div>

CSS

#content-wrap {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  position: fixed;
  justify-content: space-around;
}

#content-a {
  border: 1px solid black;
  flex-basis: 47%;
}

#content-b {
  border: 1px solid black;
  height: auto;
  overflow: auto;
  flex-basis: 45%;
}