верстка на Flex

Question

Имеется макет страницы

Мой текст выходит за родителя (когда очень маленькая страница). Как решить эту проблему ?

.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>

Answer 1

Потому что не надо явно задавать размеры блока. Поменяйте width на max-width, и всё будет работать. Хотя у Вас в целом верстка странная, из-за чего вылазят некоторые особенности. Поправил так, чтобы работало как вы бы хотели:

.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; */
  min-height: 124px;
  display: flex;
  /*
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  * Так делать не надо.
  */
  align-items: center;
  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%; */
  margin-left: 20px;
}

.request_title {
  /* width: 290px; */
  max-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; */
  max-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>

Но вообще смотрите в сторону @media, чтобы менять верстку в зависимости от разрешения экрана.

БЛОГ НА HUSL

верстка на Flex

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