На маленьком экране виден дочерний переполнение

Question

Проблема переполнения

section {height: 100vh;background: #00f}
h1 {font-size: 150px;text-transform: uppercase;background: #f00}

 
<section><div><h1>i am creative web designer</h1></div></section>

Проблема в том, что на маленьком экране родительский раздел остановлен, заполняющий экран, а дочерний H1 переполняет его, как на рисунке. Я не знаю почему?

Answer 1

word-break: break-all;

section {height: 100vh;background: #00f}
h1 {font-size: 150px;text-transform: uppercase;background: #f00; word-break: break-all;}

 
<section><div><h1>i am creative web designer</h1></div></section>

Answer 2

Может быть, вы могли бы добавить position:absolute к вашей части раздела, и для каждого элемента внутри вы можете добавить position: relative.

section {
  position:absolute;
  /* height: 100vh; */
  background: #00f;
  height: auto; /*This will make the height change depending on the element inside*/
}

h1 {
  posiiton:relative;
  font-size: 150px;
  text-transform: uppercase;
  background: #f0
  }

<section>
  <div>
    <h1>i am creative web designer</h1>
  </div>
</section>