html - How is the height calculated in this case?

Question

In this setup:

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
    <div class="menu">menu</div>
    <div class="content">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>

Answer 1

For the first case, it's about the default alignment of flexbox which is stretch. So all the elements will stretch to fit the height of the container¹ thus the menu is having the same height as the content. In other words, the tallest element will define the height and the other will stretch to fit that height.

Change the alignment and you will no more have this behavior:

html,
body {
  height: 100%;
}

.app {
  display: flex;
  align-items:flex-start; /*anything different from stretch*/
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>