divs are not adjusting to the same height

Question

Have a look at the Codepen.io sample

1. How can I adjust the height of the "menu-parent" to match height of the "content-parent"?

2. Why does this layout in Edge and Firefox not match the layout of Chrome?

   I'm using:

   • Windows 1703 (Redstone 2) with EdgeHTML 15.
   • Chrome 64.0
   • Firefox 58.0.2

These are current browser versions, so I guess I don't have to use any prefixes for flexbox. Note: info-bar has to be nested into main. Can't use any JavaScript, so HTML & CSS only.

Screenshot

Animation

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wrapper {
  background-color: rgb(255, 177, 169);
  border: 5px solid salmon;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  background-color: rgb(255, 238, 141);
  border: 5px solid gold;
  height: 144px;
  width: 100%;
}

.main {
  background-color: rgb(71, 71, 255);
  border: 5px solid blue;
  display: inherit;
  flex-direction: column;
}

.footer {
  background-color: rgb(255, 124, 76);
  border: 5px solid orangered;
  height: 100px;
}

.info-bar {
  background-color: rgb(191, 232, 245);
  border: 5px solid lightblue;
  display: inherit;
  height: 64px;
  width: 100%;
}

.content-and-menu-wrapper {
  background-color: rgb(36, 199, 191);
  border: 5px solid lightseagreen;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
  flex: 1;
}

.menu-parent {
  background-color: rgb(165, 220, 255);
  border: 5px solid lightskyblue;
  flex-wrap: wrap;
  min-height: 100%;
  width: 275px;
}

.content-parent {
  background-color: rgb(198, 210, 226);
  border: 5px solid lightsteelblue;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.menu-item {
  border: 1px solid black;
  height: 100%;
  width: 100%;
}

.content-item {
  border: 1px solid black;
  height: 1000px;
  width: 100%;
}

.spacer {
  box-sizing: border-box;
  margin: 0px;
}

<div class="wrapper spacer">
  <div class="header spacer">header</div>
  <div class="main spacer">
    <div class="info-bar spacer">info-bar</div>
    <div class="content-and-menu-wrapper spacer">
      <div class="menu-parent spacer">menu-parent
        <div class="menu-item spacer">menu-item</div>
      </div>
      <div class="content-parent spacer">content-parent
        <div class="content-item spacer">content-item</div>
      </div>
    </div>
  </div>
  <div class="footer spacer">footer</div>
</div>

Answer 1

It can be tricky when nesting flex containers and at the same time need an inner scrollable element.

First off, to make the layout render the same in Firefox/Edge (and Chrome should need it too, though try to fix it by itself):

• as main is a flex column item, it need min-height: 0 to allow it to be smaller than its content height, and here is a great answer explaining that in more detail:

  • Why don't flex items shrink past content size?

• for header/footer to keep their set height, also add flex: 1 to main, so it take the remaining height and not more

Second, to allow the menu-parent/content-parent to be equal high, we need an extra inner-wrapper having display: flex, and remove display: flex from the content-and-menu-wrapper.

Note 1; I also removed some not needed properties, which either were their default, or incorrect applied (e.g. flex-wrap: wrap; height: 100%; set on i.a. .content-parent).

Note 2; I changed the height on header/footer/info-bar a little in below code snippet, so it would look better in its smaller frame, but kept the original in the codepen.

Updated codepen

Stack snippet

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.wrapper {
    background-color: rgb(255, 177, 169);
    border: 5px solid salmon;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header {
    background-color: rgb(255, 238, 141);
    border: 5px solid gold;
    height: 50px;
}
.main {
    background-color: rgb(71, 71, 255);
    border: 5px solid blue;
    display: inherit;
    flex-direction: column;
    min-height: 0;                    /*  Firefox/Edge  */
    flex: 1;                          /*  fill remaining space  */
}
.footer {
    background-color: rgb(255, 124, 76);
    border: 5px solid orangered;
    height: 50px;  
}
.info-bar {
    background-color: rgb(191, 232, 245);
    border: 5px solid lightblue;
    display: inherit;
    height: 50px;
}
.content-and-menu-wrapper {
    background-color: rgb(36, 199, 191);
    border: 5px solid lightseagreen;
    overflow-y: scroll;
    flex: 1;
}
.inner-wrapper {
    display: flex;                    /*  moved from ".content-and-menu-wrapper"  */
}
.menu-parent {
    background-color: rgb(165, 220, 255);
    border: 5px solid lightskyblue;
    width: 275px;
}
.content-parent {
    background-color: rgb(198, 210, 226);
    border: 5px solid lightsteelblue;
    width: 100%;
}
.menu-item {
    border: 1px solid black;
    width: 100%;

}
.content-item {
    border: 1px solid black;
    height: 1000px;
    width: 100%;
}

.spacer {
    box-sizing: border-box;
    margin: 0px;
}

<div class="wrapper spacer">
  <div class="header spacer">header</div>
  <div class="main spacer">
    <div class="info-bar spacer">info-bar</div>
    <div class="content-and-menu-wrapper spacer">
      <div class="inner-wrapper">
        <div class="menu-parent spacer">menu-parent
          <div class="menu-item spacer">menu-item</div>
        </div>
        <div class="content-parent spacer">content-parent
          <div class="content-item spacer">content-item</div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer spacer">footer</div>
</div>

Answer 2

By adding display:table to the wrapper and display:table-cell to menu and content, the menu will be the height the tallest cell (content).

/* This is what replaced .spacer */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.outer {
    background-color: rgb(255, 177, 169);
    border: 5px solid salmon;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header {
    background-color: rgb(255, 238, 141);
    border: 5px solid gold;
    height: 144px;
    width: 100%;
}
.main {
    background-color: rgb(71, 71, 255);
    border: 5px solid blue;
    display: inherit;
    flex-direction: column;
    /* Added to keep info-bar stationary */
    position:relative;
    /* Added to scroll the full length of .inner */
    overflow-y:auto;

}
.footer {
    background-color: rgb(255, 124, 76);
    border: 5px solid orangered;
    height: 100px;  
}
.info-bar {
    background-color: rgb(191, 232, 245);
    border: 5px solid lightblue;
    height: 40px;
    /* Added to keep stationary */
    position:fixed;
    z-index:1;
    /* 3% is the scrollbar */
    min-width: 97%;
}
.inner {
    background-color: rgb(36, 199, 191);
    border: 5px solid lightseagreen;
    /* Any `display:table-cell` children will be at full height */
    display: table;
    flex: 1;
    /* Added to expose .info-bar */
    margin-top:40px;
}
.menu {
    background-color: rgb(165, 220, 255);
    border: 5px solid lightskyblue;
    /* Added so it takes full height of sibling */
    display:table-cell;
    width: 275px;
}
.content {
    background-color: rgb(198, 210, 226);
    border: 5px solid lightsteelblue;
    /* Added so it takes full height of parent */
    display:table-cell;
    height: 100%;
    width: 80%;
  
}
.menu-item {
    border: 1px solid black;
    height: 100%;
    width: 100%;

}
.content-item {
    border: 1px solid black;
    height: 1000px;
    width: 100%;

}

        <div class="outer">
            <header class="header">header</header>
            <main class="main">
                <nav class="info-bar">nav-bar</nav>
                <div class="inner">
                    <section class="menu">menu
                        <article class="menu-item">menu-item</article>
                    </section>
                    <section class="content">content
                        <article class="content-item">content-item</article>
                    </section>
                </div>
            </main>
            <footer class="footer">footer</footer>
        </div>

Answer 3

Flex is probably not the best way to do that. Could you consider to use grids ?

<html>
<head>
    <style>
        .container {
            border: solid 3px red;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .content1 {
            border: solid 3px lightblue;
        }
        .content2 {
            border: solid 3px gray;
            height: 2000px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content1">content1</div>
        <div class="content2">content2</div>
    </div>
</body>
</html>

In your codepen sample, you need to change three classes to achieve the same behavior :

.content-and-menu-wrapper {
    background-color: rgb(36, 199, 191);
    border: 5px solid lightseagreen;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-y: scroll;
}
.menu-parent {
    background-color: rgb(165, 220, 255);
    border: 5px solid lightskyblue;
}
.content-parent {
    background-color: rgb(198, 210, 226);
    border: 5px solid lightsteelblue;
}