Подскажите пожалуйста как уместить текст внутрь flex-элемента

Question

Бьюсь больше дня уже - если я не задаю высоту элементу, тогда текст выползает за рамки flex-элемента и в целом слипается, мне же нужно, чтобы граница элемента была вдоль текста, но при этом длина элемента должна быть 730px. Вопрос - как нормализовать здесь текст и уместить его в границы, как на первой картинке?

.page {
  min-width: 1100px;
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 600px;
  max-height: 756px;
}

div {
  border: 1px solid red;
}

.logo {
  height: 32px;
  width: 228px;
}

.logo_place_header {
  flex: none;
  top: 0;
  left: 0;
  margin: 30px 60px 0px;
}

.title {
  justify-self: center;
  width: 730px;
  line-height: 96px;
  font-size: 102px;
  font-weight: 600;
}

.header__title {
  margin: 0px 64px 0px;
  z-index: 1;
}

.subtitle {
  width: 388px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
  flex-wrap: wrap;
  text-align: left;
}

.header__subtitle {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0px 64px 30px;
}

<div class="page">
  <header class="header">
    <div class="logo logo_place_header">
      <img src="./images/logo_place_header.svg" alt="Логотип для шапки сайта">
    </div>
    <div class="title header__title">
      <h1>Научиться учиться</h1>
    </div>
    <div class="subtitle header__subtitle">
      <h2>
        <html lang="ru">Какие современные и эффективные подходы к обучению вы можете использовать в своей жизни? <a class="header__link" href="#">Узнать &#8594;</a>

        </html>
      </h2>
    </div>
    <!-- 
      <div class="main-illustration header__elements-position-type"><img src="./images/header-image.png" alt="Картинка для шапки сайта" width="765"></div>
      <div class="square-pic header__elements-position-type"></div>   -->
  </header>
  <!--<div class="two-columns">
        <div class="brief two-columns__brief">
            <h4>Главные проблемы в обучении</h4>  
        </div>
        <div class="main-text"> 
          <p class="two-columns__main-text">Ни в школе, ни в институте нас не учат тому, как правильно изучать материал. Мы готовимся к экзаменам и учим билеты. Мы тренируемся решать однообразные задачи, чтобы лучше сдать тест, но часто в итоге это не дает нам реального знания. Зубрежка быстро выветривается и не приносит пользы.</p>
          <p class="two-columns__main-text"><span class="span-accent">Вывод:</span> учиться тоже нужно уметь, но почему-то этому мало где учат. Что с этим делать?</p>
          <p class="two-columns__main-text">Конкретные техники и упражнения помогают изменить подход к обучению, сделать его эффективным и захватывающим. Эти же техники применяются на примере обучения в Практикуме.</p>
        </div>    
      </div>   -->
</div>

Answer 1

Получилось сделать вот так:

<header class="header">
  <div class="logo logo_place_header">
    <img src="./images/logo_place_header.svg" alt="Логотип для шапки сайта">
  </div>
  <div>
    <h1 class="header__title header__title_position">Научиться учиться</h1>
  </div>
  <div class="header__subtitle header__subtitle_position">
    <p>Какие современные и эффективные подходы к обучению вы можете использовать в своей жизни? <a class="header__link" href="#">Узнать &#8594;</a></p>
  </div>
  <div class="header__main-illustration header__main-illustration_place"><img src="./images/header-image.png" alt="Картинка для шапки сайта" width="765"></div>
  <div class="header__square-pic header__square-pic_place"></div>
</header>

.page {
  min-width: 1100px;
  /* мы ещё не умеем делать мобильную версию сайта, */
  /* поэтому выше установлена минимальная ширина страницы */
  max-width: 1600px;
  /* выше установили ограничение по максимальной ширине */
  margin: 0 auto;
  /* выше для экранов больше 1600px отцентрировали весь контент */
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  min-height: 600px;
  max-height: 756px;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

.logo {
  height: 32px;
  width: 228px;
  position: absolute;
  margin: 0;
  padding: 0;
}

.logo_place_header {
  top: 0;
  left: 0;
  margin:  30px 60px 0px;
}

.header__title {
  position: relative;
  z-index: 2;
  width: 730px;
  line-height: 96px;
  font-size: 102px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.header__title_position {
  margin: 0px 64px 0px;
}

.header__subtitle {
  width: 388px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
  flex-wrap: nowrap;
  text-align: left;
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.header__subtitle_position {
  bottom: 0;
  left: 0;
  margin: 0px 64px 30px;
}

.header__link {
  color: #2f80ed;
  text-decoration: 0;
  margin: 0;
  padding: 0;
}

.header__main-illustration {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  margin: 0;
  padding: 0;
}
.header__main-illustration_place {
  z-index: 1;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
}

.header__square-pic { 
  height: 568px;
  width: 568px;
  background-color: #2f80ed;
  position: absolute;
  margin: 0;
  padding: 0;
}

.header__square-pic_place {
  top: 0;
  right: 0;
  margin: 64px 0px 0px;
}

БЛОГ НА HUSL

Подскажите пожалуйста как уместить текст внутрь flex-элемента

Ответы (1 шт):