Issues with scaling html to fit content - html

Question

Here is the link to the codepen: https://codepen.io/asosnovsky/pen/eYZmroJ
I feel like this might just be a strange edge case of how the browser renders content (either that or I am going nuts not being able to figure out what's going on).
The Issue:
I am trying to fit my content into two boxes using flex-css, but whenever the width of the device is below 800px, the right box overflows. The issue goes away when I remove the "span" elements that are inside the right box, but I can't figure out what exactly is causing the overflow.
In the codepen above, I added a complete example of my code.
Some pictures
It overall looks like this (incorrect)
But should be like this (regardless of screen size)
Thank you for all the help in advance!
SCSS
#lobby {
width: 100%;
height: 100%;
}
#lobby-inner-wrap {
padding: 5px;
width: calc(100% - 5px);;
height: calc(100% - 5px);
#lobby-inner {
display: flex;
flex-direction: row;
#lobby-players {
max-width: 100%;
&--inner {
height: 100%;
margin: 5px;
padding: 5px;
box-shadow: 1px 1px 5px #0005;
}
max-width: 40vw;
min-width: 150px;
width: 200px;
&--list {
overflow: auto;
}
}
#lobby-settings {
flex: 1;
max-width: 100%;
&--inner {
overflow: auto;
}
&--inner-wrap {
height: 100%;
box-shadow: 1px 1px 5px #0005;
padding: 5px;
margin: 5px;
overflow: hidden;
}
}
}
}
.game-piece-hub {
display: flex;
flex-direction: column;
overflow: hidden;
&--container {
flex: 1;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
.game-piece {
flex: 0 0 150px;
margin-left: 5px;
margin-right: 5px;
}
}
}
$border-radius: 5%;
.game-piece {
color: #ff3366;
background-color: #212121;
width: fit-content;
box-shadow: 5px 5px 4px #777a;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
overflow: hidden;
position: relative;
&--inner {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
justify-content: center;
display: flex;
flex-direction: column;
overflow: hidden;
// max-width: 200px;
width: fit-content;
}
&--highlight {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
transition: opacity ease 500ms;
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #63636399;
font-size: 10em;
color: #f58a;
text-shadow: 2px 2px 2px #fff5;
&:hover {
opacity: 0.5;
background-color: #68526299;
}
&.enabled {
opacity: 1;
}
}
&--img {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
img {
max-width: 100%;
}
}
&--description {
&--wrap {
padding: 0;
white-space: nowrap;
display: flex;
flex-direction: row;
}
background-color: #363636;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.game-piece--name {
margin-bottom: 0.25em;
margin-top: 0.5em;
font-size: 1em;
text-align: center;
max-height: 1.25em;
overflow: hidden;
}
.game-piece--type {
font-size: 0.75em;
margin-bottom: 1em;
color: black;
background-color: #68caa4;
padding: 0.5em;
border-radius: 4px;
}
}
}