How to make elements in flexbox shrink in width when the screen is reduced, and not repel immediately upon contact?

Question

Flexbox

If you do flexbasis then they block the width value for child elements. And I need them to always be the entire width of the browser with the margins set now, and decrease when the browser width changes, Remaining on the same screen, up to a certain critical point (for example, 300px) and only then would they jump to a new line.

Here is the code

<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

Media Queries