title: Responsive styles with flex box while using min max property
body: <p>I am trying to make a responsive design with CSS flexbox. Here is the details that I am trying to achieve.</p>
  <ol>
  <li>Display items with max-width:300px in flex-direction row.</li>
  <li>When we shrink the browser window the items from one row will stay in same line until the individual item width becomes 200px, min-width:200px. When the width reaches to min-width:200px the items from the right side will move to the next line.</li>
  </ol>
  <p>I am not able to accomplish this task with flex box. Is there anybody can help me with this. It will be highly appreciated. Thanks in Advance.</p>
  <p>Here is the code, I have tried so far:</p>
  <pre><code> .wrapper{
    width:100%;
    height:100%;
    }
    .content{
      display:flex;
      flex-direction:column;
      width:95%;
      margin: 0 auto;
    }
    .header{
        display:flex;
        justify-content:space-between;
        margin-top:16px;
        padding-left:20px;
        background: #E0E3E7;
        border-radius: 4px;
        min-height: 56px;
    }
    .box{
        background: #F0F2F3;
        border-radius: 4px;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        min-height:119px;
    }
    .box-item{
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #C2C7CF;
        max-width:300px;
        min-width:200px;
        width:100%;
        height:56px;
        margin-left:32px;
        margin-right:32px;
        margin-top:10px;
        margin-bottom:10px;
    }
  </code></pre>
  <p>And, here is fiddle link: <a href="https://jsfiddle.net/961ruj3q/32/" rel="nofollow noreferrer">https://jsfiddle.net/961ruj3q/32/</a></p>