Как сделать чтобы во flexbox элементы при уменьшении экрана сжимались по ширине а не отталкивались сразу же при соприкосновении?

Question

[Андрей]

Если делать flexbasis то тогда они блокирует значение ширины для дочерних элементов. А мне нужно чтобы они всегда были на всю ширину браузера с установленными сейчас маржинами, и уменьшались при изменении ширины браузера, Оставаясь на одном экране, до определенной критической точки ( например 300px) и уже потом бы стали перескакивать на новую строку.

Вот код

<section class="two">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
       <div class="two_wrap">
           <div class="two_wrap_item">
                <img src="img/two-item1.jpg" alt="">
                <h3>CHARGE 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Consequuntur iure unde, molestiae excepturi nostrum omnis.</p>
            </div>
            <div class="two_wrap_item">
                <img src="img/two-item2.jpg" alt="">
                <h3>CHARGE 2+</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Consequuntur iure unde, molestiae excepturi nostrum omnis.</p>
            </div>
            <div class="two_wrap_item">
                <img src="img/two-item3.jpg" alt="">
                <h3>CHARGE 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Consequuntur iure unde, molestiae excepturi nostrum omnis.</p>
            </div>
            </div>
       </section>

.two {
    text-align: center;
}

.two_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 100%;
    text-align: center;
}


.two_wrap_item {
    background-color: #f1f1f1;
   
  
}

.two_wrap_item img {
    max-width: 100%;
}

.two_wrap_item h3 {
   font-family: 'Roboto', sans-serif;
   font-size: 33px;
    font-weight: 600;
    color: #313131;
}

Answer 1

[Иван]

Медиа-запросы