Flex-wrap only wraps one item in container - html

Question

Situation: I have a div with flex and h1 and h3 children inside it.
Problem: The flex-wrap does not apply correctly to the h1 element.
What I tried: I have tried applying width, and max-width to the container but the h1 tag doesn't wrap when resized but the h3 does.
I've tried to apply height as well. I've applied the flex properties to other containers but no matter what the h1 won't move. The h1 doesn't wrap to the other line. It just stays put and gets engulfed by the overflow when the browser resizes.
Expected result: the h1 must wrap its letters when resizing the screen.
Snippet:
* {
box-sizing: border-box;
font-family: Francois One;
}
body {
margin: 0;
font-family: Francois One;
font-size: 1rem;
line-height: 1.5;
overflow-x: hidden;
}
.v-header {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.fullscreen-img-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-img-wrap img {
min-width: 100%;
min-height: 100vh;
}
.header-overlay {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgb(250, 134, 188);
opacity: 0.40;
z-index: 1
}
.header-content {
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
.header-content h1 {
font-size: 50px;
color: rgb(255, 255, 255);
font-family: Alfa Slab One;
letter-spacing: 10px;
text-transform: uppercase;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
}
.header-content h3 {
color: rgb(247, 45, 146);
}
<header class="v-header container">
<div class="fullscreen-img-wrap">
<img src="giphy.gif" alt="audio waves">
</div>
<div class="header-overlay"></div>
<div class="header-content">
<h1 class="display-4">20Somethingandliving</h1>
<h3>Podcast</h3>
</div>
</header>

Answer 1

I think you want to break the word? because your h1 is missing the spaces, without telling the element to break the word it will overflow.
Solution:
word-break: break-word;// or break-all;
Working snippet:
* {
box-sizing: border-box;
font-family: Francois One;
}
body {
margin: 0;
font-family: Francois One;
font-size: 1rem;
line-height: 1.5;
overflow-x: hidden;
}
.v-header {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.fullscreen-img-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-img-wrap img {
min-width: 100%;
min-height: 100vh;
}
.header-overlay {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgb(250, 134, 188);
opacity: 0.40;
z-index: 1
}
.header-content {
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
.header-content h1 {
word-break: break-word;
font-size: 50px;
color: rgb(255, 255, 255);
font-family: Alfa Slab One;
letter-spacing: 10px;
text-transform: uppercase;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
}
.header-content h3 {
color: rgb(247, 45, 146);
}
<header class="v-header container">
<div class="fullscreen-img-wrap">
<img src="giphy.gif" alt="audio waves">
</div>
<div class="header-overlay"></div>
<div class="header-content">
<h1 class="display-4">20Somethingandliving</h1>
<h3>Podcast</h3>
</div>
</header>