верстка на Flex
Мой текст выходит за родителя (когда очень маленькая страница). Как решить эту проблему ?
.wrapper
{
display: flex;
max-width: 1028px;
margin: 0 auto;
flex-direction: row;
background-color: aqua;
justify-content: space-evenly;
flex-wrap: wrap
}
.request
{
max-width: 433px; width: 100%;margin: 20px 10px;height: 124px;display: flex;flex-direction:column;justify-content:
center;flex-wrap: wrap;background: rgba(48, 156, 255,0.44);border-radius: 13px;padding: 15px;
}
.request_photo
{
width: 64px;height: 64px; background: #0a8a37; display: flex;align-items: center;justify-content: center;
}
.request_text
{width: 80%;}
.request_title
{
width:290px;background: #650909;flex: 1;font-family: 'Gilroy';font-style:
normal;font-weight: 700;font-size: 20px;line-height: 25px;color: #FFFFFF;align-items: center; display: flex;
}
.request_description
{
margin-top: 5px;width: 290px;background: #228f53;flex: 1;display: flex;font-family: 'Gilroy';font-style:
normal;font-weight: 400;font-size: 16px;line-height: 19px;color:#FFFFFF;align-items: center; display: flex;
}
<div class="wrapper">
<div class="request">
<div class="request_photo">
<svg style="width: 64px; height: 64px;">
<use href="https://thzphotonics.org/test1/img/sprite.svg#sputnikFavicon"></use>
</svg>
</div>
<div class="request_text">
<div class="request_title">Поиск напарника</div>
<div class="request_description">Привет! Ищу тиммейта для игры в доту! Играю каждый день по вечерам.</div>
</div>
</div>
<div class="request">
<div class="request_photo">
<svg style="width: 64px; height: 64px;">
<use href="https://thzphotonics.org/test1/img/sprite.svg#sputnikFavicon"></use>
</svg>
</div>
<div class="request_text">
<div class="request_title">Поиск напарника</div>
<div class="request_description">Привет! Ищу тиммейта для игры в доту! Играю каждый день по вечерам.</div>
</div>
</div>
<div class="request">
<div class="request_photo">
<svg style="width: 64px; height: 64px;">
<use href="https://thzphotonics.org/test1/img/sprite.svg#sputnikFavicon"></use>
</svg>
</div>
<div class="request_text">
<div class="request_title">Поиск напарника</div>
<div class="request_description">Привет! Ищу тиммейта для игры в доту! Играю каждый день по вечерам.</div>
</div>
</div>
<div class="request">
<div class="request_photo">
<svg style="width: 64px; height: 64px;">
<use href="https://thzphotonics.org/test1/img/sprite.svg#sputnikFavicon"></use>
</svg>
</div>
<div class="request_text">
<div class="request_title">Поиск напарника</div>
<div class="request_description">Привет! Ищу тиммейта для игры в доту! Играю каждый день по вечерам.</div>
</div>
</div>
</div>
Источник: Stack Overflow на русском