Флексбокс не меняет размер ⇐ CSS

[Anonymous]

Я работаю над адаптивным дизайном с использованием флексбоксов, но столкнулся с проблемой: при уменьшении окна мой контент обрезается и появляется горизонтальная полоса прокрутки. Как я могу адаптировать дизайн к размеру окна, не обрезая содержимое и не создавая горизонтальную прокрутку? Я пробовал различные настройки флексбокса, но мне не удалось заставить его работать правильно.
body {
background-color: white;
display: flex;
flex-direction: column;
}

nav {
text-decoration: none;
display: flex;
align-items: center;
}

.logo {
min-width: 200px;
align-content: center;
display: block;
margin: 80px 350px;
}

.menu_navegacao {
list-style: none;
display: flex;
gap: 40px;
justify-content: right;
font-size: 18px;
margin: 0px 200px;
}

a {
text-decoration: none;
color: #141414;
}

header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.introducao {
display: flex;
gap: 200px;
/* justify-items: center; */
/* justify-content: center; */
min-width: 0;
}

.foto_perfil {
display: flex;
width: 37.037vh;
height: 500px;
padding-left: 37.037vh;
}

.introducao_texto {
font-size: 40px;
flex-wrap: wrap;
min-width: 0;
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... t-resizing