Nested flex columns prevent child from constraining to max-height

Question

When I nest several flex boxes and use max-height: 100%, the inner child will not respect the max-height. But if I remove just one of flex boxes it does respect it.

See the included snippet example -- the inner div with .content class is not shortened to respect max height. Instead the div is extended and clipped, and the scrollbar indicates the full element is showing.

If I completely remove the div with class .window-content, the .content class works exactly as I would expect. But the problem is .window-content brings in styles which are needed to be applied -- in this example a padding.

How can styles be applied to get the child to respect max-height?

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.fullscreen-overlay {
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 12px 12px;
}

.fullscreen-container {
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;  
}

.window-with-titlebar {
  background-color: yellow;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.titlebar {
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  max-height: 30px;
  min-height: 30px;
}

.titlebar-left {
  background-color: darkgreen;
}

.titlebar-right {
  background-color: lightgreen;
}

.window-content {
  background-color: brown;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.content-header {
  background-color: cyan;
  height: 10px;
  max-height: 10px;
  min-height: 10px;
}

.content {
  background-color: blue;
  overflow-y: scroll;
  max-width: 100%;
  max-height: 100%;
}

<div class="fullscreen-overlay">
  <div class="fullscreen-container">
    <div class="window-with-titlebar">
      <div class="titlebar">
        <div class="titlebar-left">
          Left
        </div>
        <div class="titlebar-right">
          Right
        </div>
      </div>
      <div class="window-content">
        <div class="content-header"></div>
        <div class="content">
          1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50
        </div>
      </div>
    </div>
  </div>
</div>