Бьюсь больше дня уже - если я не задаю высоту элементу, тогда текст выползает за рамки 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="#">Узнать →</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>
.header
отсутствует закрывающая}