Проблема в регулировке ширины блока

Question

У меня простая верстка. Хотелось бы, чтобы при уменьшении экрана ширина блока <<Контакты>> и <<Телефон>> не выходили за рамки верхнего блока.

.request__blocks {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.contact__face {
  width: 449px;
  min-width: 300px;
  height: 59px;
  padding-left: 6.6815144766%;
  padding-top: 4%;
  background: #f4f4f4;
  border-radius: 20px;
  margin-bottom: 20px;
}

.request__task {
  width: 359px;
  height: 137px;
  padding-top: 16px;
  padding-left: 30px;
  overflow-y: auto;
  padding-bottom: 10px;
  background: #f4f4f4;
  border-radius: 20px;
}

.task__text {
  width: 275px;
  height: 86px;
  resize: none;
  text-align: left;
  line-height: 115%;
  color: rgba(31, 31, 31, 0.2);
}

<div class="request">
  <div class="container">
    <div class="request__inner">
      <div class="request__title">Быстрый запрос</div>
      <div class="request__blocks">
        <div class="request__contact">
          <div class="contact__face">
            <p class="contact__text subtext">Контактное лицо</p>
          </div>
          <div class="contact__face">
            <p class="contact__text subtext">Телефон</p>
          </div>
        </div>
        <div class="request__task">
          <textarea class="task__text subtext">Задача</textarea>
        </div>
        <div class="request__icon">
          <img src="./assets/icons/send.png" alt="icon send" class="icon__send" />
        </div>
      </div>
    </div>
    <!-- .request__inner -->
  </div>
  <!-- .container -->
</div>
<!-- .request -->

Это надо исправить.

при больших ширинах они нормально отображаются.

Answer 1

Уберите фиксированную ширину у данных блоков, установите родительскому элементу свойства display:flex; flex-direction: column;

БЛОГ НА HUSL

Проблема в регулировке ширины блока

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