Flexbox layout losing proportions when reduced in size

To avoid the Flexbox layout issue, you need to add the following:

* {
   flex-shrink: 0;
   min-width: 0;
   min-height: 0;
}

Here, 

flex-shrink: 1 - Flex items are allows to shrink

min-width: 0 - flex items to shrink past their content