CSS question: Flexible width to make it reflow ready

Question

Could anyone please help me with this, How can I make the parent container flexible and make it reflow ready?

.container{
width: 350px;
border: 1px solid red;
}

.item{
margin-top:2px;
display: flex;
}

.line{
flex-grow:1;
}

<div class="container">
  <div class="item">
  <div class="line"><span>xyx</span></div>
  <span>10 USD</span>
  </div>
  <div class="item">
  <div class="line"><span>q</span></div>
  <span>* 2</span>
  </div>
  <div class="item">
  <div class="line"><span>total</span></div>
  <span>20 USD</span>
  </div>
</div>

Answer 1

Since you are referring reflow as browser width change and your default width for the container is 350px

just your change width: 350px to max-width: 350px. Your container is now responsive for smaller browser width

You can play around around here and change the browser here:

.container{
max-width: 350px;
border: 1px solid red;
}

.item{
margin-top:2px;
display: flex;
}

.line{
flex-grow:1;
}

<div class="container">
  <div class="item">
  <div class="line"><span>xyx</span></div>
  <span>10 USD</span>
  </div>
  <div class="item">
  <div class="line"><span>q</span></div>
  <span>* 2</span>
  </div>
  <div class="item">
  <div class="line"><span>total</span></div>
  <span>20 USD</span>
  </div>
</div>