title: Flex container not wrapping items
body: <p>I was creating a simple flexbox pricing page for my assignment and I ended up completing it. The problem is that the pricing cards do not wrap to the next row when the screen size is reduced i have set flex-wrap to wrap but still no luck. I searched this problem up and some results said that setting flex-container max-width to 100% would help, but it didn't. I have tried a bunch of other things but to no avail. Can someone help me with this?</p>
  <p>CODE</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      padding: 0px;
      margin: 0px; 
      box-sizing: border-box;
      font-family: Poppins, sans-serif;
      color:  #00255A;
  }
  
  
  
  .card-container{
      display: flex;
  
      height: 80%;
  
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
  }
  
  
  
  .card{
      background-color: white;
      width:25%;
      height: 70%;
      border-radius: 5%;
      transition: .5s ease;
      border: 3px solid #00255A;
      overflow: hidden;
      
  }
  
  .card-heading{
      text-align: center;
      padding: 15px;
      text-transform: uppercase;
      border-bottom: 3px dotted #00255A;
      margin: 10px;
  }
  
  .card-body{
      margin-top: 15px;
      margin: 2%;
  }
  
  .card-price{
  
      width: 60%;
      margin: auto;
     text-align: center;
     margin-top: 10%;
     font-size: larger;
  }
  
  
  .card-features{
      margin-top: 4%;
  }
  
  ul{
      text-align: center;
      list-style: none;
      
  }
  
  ul li{
      padding: 5px;
      font-size: small;
      font-weight: light;
      
  }
  
  .btn-container{
      text-align: center;
      margin-top: 10px;
  
  }
  
  .btn-container button{
      width:150px;
      height: 40px;
      background-color: white;
      font-weight: bold;
      border: 3px solid #00255A ;
      transition: .5s ease-out;
  }
  
  
  .recommended{
      position: absolute;
      background-color: red;
      width:150px;
      top: 5px;
      left:-18px;
      transform: rotate(-30deg);
      padding-left: 15px;
      
  
  }
  
  .recommended h4{
      font-weight: lighter;
      text-transform: uppercase;
      color: white;
  }
  
  
  
  /* Hover Effects */
  
  
  .btn-container button:hover{
      background-color: #00255A;
      color: white;
      box-shadow: 4px 4px 5px lightgray;
  
  
  }
  
  .card:hover{
      box-shadow: 2px 2px 3px lightgray;
      transform: translateY(-5px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-container"&gt;
  
      &lt;!-- Student Plan Card --&gt;
      &lt;div class="card"&gt;
  
          &lt;div class="card-heading"&gt;
              &lt;h3&gt;Student&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div class="card-price"&gt;
                  &lt;h1&gt;19.99/mo&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="card-features"&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;24/7 Live Support&lt;/li&gt;
                      &lt;li&gt;15GB Cloud Storage&lt;/li&gt;
                      &lt;li&gt;Upto 5 Users&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-container"&gt;
              &lt;button&gt;Buy Now!&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Team Plan Card --&gt;
  
      &lt;div class="card" style="height: 80%; position: relative;"&gt;
          &lt;div class="recommended"&gt;
              &lt;h4&gt;Popular&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="card-heading"&gt;
              &lt;h3&gt;Team&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div class="card-price"&gt;
                  &lt;h1&gt;24.99/mo&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="card-features"&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;24/7 Live Support&lt;/li&gt;
                      &lt;li&gt;40GB Cloud Storage&lt;/li&gt;
                      &lt;li&gt;Upto 10 Users&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-container"&gt;
              &lt;button&gt;Buy Now!&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Business Plan Card --&gt;
  
      &lt;div class="card" &gt;
          &lt;div class="card-heading"&gt;
              &lt;h3&gt;Business &lt;/h3&gt;
  
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div class="card-price"&gt;
                  &lt;h1&gt;39.99/mo&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="card-features"&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;24/7 Live Support&lt;/li&gt;
                      &lt;li&gt;100GB Cloud Storage&lt;/li&gt;
                      &lt;li&gt;Unlimited Users&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="btn-container"&gt;
              &lt;button&gt;Buy Now!&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>