Prevent element height in flexbox container shrinking

Question

I have a basic flexbox layout with a flex container, inside the flex container there is a menu on the top and a container for images below. The container for the images has a dynamic height, it increases it's vertical size to fit the images which increase their height as they have an aspect ratio and percentage width. The container below the menu increases it's size and takes up the menu's space even though I've set the height to 50px. How can I prevent the menu shrinking?

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: lightblue;
}

.top-menu {
  height: 50px;
  width: 100%;
  background-color: orange;
}

.images-container {
  width: 50%;
  border: 2px dashed blue;
}

img {
  width: 100%;
  display: block;
}

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

Code Sandbox: https://codesandbox.io/p/sandbox/image-container-wjw2ld

Answer 1

Set flex-shrink: 0 (default is 1) on .top-menu to prevent it from decreasing in height.