title: Can flex items wrap in a container with dynamic height?
body: <p>I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. </p>
  
  <ol>
  <li><p>I want to display content across 4 columns. </p></li>
  <li><p>Have the content be listed in a columnar format and wrap to the next column when running out of room. </p>
  
  <pre><code>display: flex; 
  flex-direction: column; 
  flex-wrap: wrap; 
  height:&lt;##&gt;px
  </code></pre>
  
  <p>should take care of this. </p>
  
  <p>But this is where things get tricky. <em>What if I don't want a fixed height, but one that grows/shrinks based on the length of the content?</em></p>
  
  <p><a href="https://i.stack.imgur.com/P1gZb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P1gZb.png" alt="enter image description here"></a></p></li>
  <li><p>Have the container's height be dynamic. Like in Case B, the rows grew to 7 rows from 4 rows in Case A. Content is being set to fill all columns as far as they can go.</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.other-nearby-cities {
    display: flex;
    flex-direction: column;
    height: 700px;
    flex-wrap: wrap;
    border: solid 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="other-nearby-cities"&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Altamonte Springs&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Apopka&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Arcadia&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Auburndale&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Belle Glade&lt;/span&gt;&lt;span&gt; (10)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Boca Raton&lt;/span&gt;&lt;span&gt; (33)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Bonita Springs&lt;/span&gt;&lt;span&gt; (10)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Boynton Beach&lt;/span&gt;&lt;span&gt; (21)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Bradenton&lt;/span&gt;&lt;span&gt; (46)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Brandon&lt;/span&gt;&lt;span&gt; (16)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Brooksville&lt;/span&gt;&lt;span&gt; (8)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Cape Coral&lt;/span&gt;&lt;span&gt; (17)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Clearwater&lt;/span&gt;&lt;span&gt; (90)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Clewiston&lt;/span&gt;&lt;span&gt; (9)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Cocoa&lt;/span&gt;&lt;span&gt; (18)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Crystal River&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Dania Beach&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Davie&lt;/span&gt;&lt;span&gt; (14)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Daytona Beach&lt;/span&gt;&lt;span&gt; (40)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Deerfield Beach&lt;/span&gt;&lt;span&gt; (15)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Deland&lt;/span&gt;&lt;span&gt; (15)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Delray Beach&lt;/span&gt;&lt;span&gt; (41)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Englewood&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Fort Lauderdale&lt;/span&gt;&lt;span&gt; (132)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Fort Myers&lt;/span&gt;&lt;span&gt; (79)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Fort Pierce&lt;/span&gt;&lt;span&gt; (41)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Fort Walton Beach&lt;/span&gt;&lt;span&gt; (17)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Gainesville&lt;/span&gt;&lt;span&gt; (58)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Greenacres&lt;/span&gt;&lt;span&gt; (9)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Hallandale Beach&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Havana&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Hollywood&lt;/span&gt;&lt;span&gt; (22)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Hudson&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Immokalee&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Jacksonville&lt;/span&gt;&lt;span&gt; (214)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Key West&lt;/span&gt;&lt;span&gt; (9)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Kissimmee&lt;/span&gt;&lt;span&gt; (31)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lake City&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lake Wales&lt;/span&gt;&lt;span&gt; (8)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lake Worth&lt;/span&gt;&lt;span&gt; (26)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lakeland&lt;/span&gt;&lt;span&gt; (45)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lantana&lt;/span&gt;&lt;span&gt; (8)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Largo&lt;/span&gt;&lt;span&gt; (17)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lauderdale Lakes&lt;/span&gt;&lt;span&gt; (15)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lauderhill&lt;/span&gt;&lt;span&gt; (21)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lecanto&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Leesburg&lt;/span&gt;&lt;span&gt; (22)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Live Oak&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Longwood&lt;/span&gt;&lt;span&gt; (10)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Lutz&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Maitland&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Margate&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Marianna&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Melbourne&lt;/span&gt;&lt;span&gt; (23)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Miami&lt;/span&gt;&lt;span&gt; (468)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Milton&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Miramar&lt;/span&gt;&lt;span&gt; (23)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Naples&lt;/span&gt;&lt;span&gt; (47)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;New Port Richey&lt;/span&gt;&lt;span&gt; (20)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;New Smyrna&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;North Port&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Oakland Park&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Ocala&lt;/span&gt;&lt;span&gt; (33)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Okeechobee&lt;/span&gt;&lt;span&gt; (9)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Orange Park&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Orlando&lt;/span&gt;&lt;span&gt; (216)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Ormond Beach&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Oviedo&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Pahokee&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Palatka&lt;/span&gt;&lt;span&gt; (13)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Palm Bay&lt;/span&gt;&lt;span&gt; (8)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Palm Beach Gardens&lt;/span&gt;&lt;span&gt; (8)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Panama City&lt;/span&gt;&lt;span&gt; (27)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Pembroke Pines&lt;/span&gt;&lt;span&gt; (24)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Pensacola&lt;/span&gt;&lt;span&gt; (69)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Perry&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Plantation&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Pompano Beach&lt;/span&gt;&lt;span&gt; (32)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Port Charlotte&lt;/span&gt;&lt;span&gt; (15)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Port Orange&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Port St Lucie&lt;/span&gt;&lt;span&gt; (17)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Punta Gorda&lt;/span&gt;&lt;span&gt; (8)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Quincy&lt;/span&gt;&lt;span&gt; (11)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Riviera Beach&lt;/span&gt;&lt;span&gt; (36)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Rockledge&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Royal Palm Beach&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Sanford&lt;/span&gt;&lt;span&gt; (20)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Santa Rosa Beach&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Sarasota&lt;/span&gt;&lt;span&gt; (64)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Sebring&lt;/span&gt;&lt;span&gt; (9)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Spring Hill&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;St Augustine&lt;/span&gt;&lt;span&gt; (24)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;St Petersburg&lt;/span&gt;&lt;span&gt; (137)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Starke&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Stuart&lt;/span&gt;&lt;span&gt; (23)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Sunrise&lt;/span&gt;&lt;span&gt; (16)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Tallahassee&lt;/span&gt;&lt;span&gt; (131)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Tamarac&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Tampa&lt;/span&gt;&lt;span&gt; (221)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Tarpon Springs&lt;/span&gt;&lt;span&gt; (7)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Titusville&lt;/span&gt;&lt;span&gt; (13)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Venice&lt;/span&gt;&lt;span&gt; (15)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Vero Beach&lt;/span&gt;&lt;span&gt; (31)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;West Palm Beach&lt;/span&gt;&lt;span&gt; (135)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Winter Garden&lt;/span&gt;&lt;span&gt; (6)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Winter Haven&lt;/span&gt;&lt;span&gt; (19)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Winter Park&lt;/span&gt;&lt;span&gt; (19)&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;span class="capitalize"&gt;Winter Springs&lt;/span&gt;&lt;span&gt; (5)&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/Talamihg/pen/WjMYNd" rel="noreferrer">https://codepen.io/Talamihg/pen/WjMYNd</a></p>