Flex-wrap упаковывает только один предмет в контейнер

Question

Ситуация : у меня есть div с гибкими и h1 и h3 детьми внутри него.

Проблема : flex-wrap делает неправильно применяется к элементу h1.

Что я пробовал : я пытался применить width и max-width к контейнеру, но тег h1 не перенос при изменении размера, но h3 делает. Я также пытался применить height. Я применил свойства flex к другим контейнерам, но независимо от того, что h1 не будет перемещаться. h1 не переносится на другую строку. Он просто остается на месте и поглощается переполнением при изменении размера браузера.

Ожидаемый результат : h1 должен переносить буквы при изменении размера экрана.

Фрагмент :

* {
  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

Я думаю, вы хотите сломать слово? потому что ваш h1 пропускает пробелы, не сообщая элементу о разрыве слова, он переполнится.

Решение :

    word-break: break-word;// or break-all;

Рабочий фрагмент :

* {
  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>