Can flex items wrap in a container with dynamic height?

css flexbox css-grid css-multicolumn-layout

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.

  1. I want to display content across 4 columns.

  2. Have the content be listed in a columnar format and wrap to the next column when running out of room. 

    display: flex; 
flex-direction: column; 
flex-wrap: wrap; 
height:<##>px

    should take care of this.

    But this is where things get tricky. What if I don't want a fixed height, but one that grows/shrinks based on the length of the content?

    enter image description here

  3. 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.

.other-nearby-cities {
  display: flex;
  flex-direction: column;
  height: 700px;
  flex-wrap: wrap;
  border: solid 1px;
}
<ul class="other-nearby-cities">
  <li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
  <li><span class="capitalize">Apopka</span><span> (11)</span></li>
  <li><span class="capitalize">Arcadia</span><span> (11)</span></li>
  <li><span class="capitalize">Auburndale</span><span> (5)</span></li>
  <li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
  <li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
  <li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
  <li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
  <li><span class="capitalize">Bradenton</span><span> (46)</span></li>
  <li><span class="capitalize">Brandon</span><span> (16)</span></li>
  <li><span class="capitalize">Brooksville</span><span> (8)</span></li>
  <li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
  <li><span class="capitalize">Clearwater</span><span> (90)</span></li>
  <li><span class="capitalize">Clewiston</span><span> (9)</span></li>
  <li><span class="capitalize">Cocoa</span><span> (18)</span></li>
  <li><span class="capitalize">Crystal River</span><span> (6)</span></li>
  <li><span class="capitalize">Dania Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Davie</span><span> (14)</span></li>
  <li><span class="capitalize">Daytona Beach</span><span> (40)</span></li>
  <li><span class="capitalize">Deerfield Beach</span><span> (15)</span></li>
  <li><span class="capitalize">Deland</span><span> (15)</span></li>
  <li><span class="capitalize">Delray Beach</span><span> (41)</span></li>
  <li><span class="capitalize">Englewood</span><span> (5)</span></li>
  <li><span class="capitalize">Fort Lauderdale</span><span> (132)</span></li>
  <li><span class="capitalize">Fort Myers</span><span> (79)</span></li>
  <li><span class="capitalize">Fort Pierce</span><span> (41)</span></li>
  <li><span class="capitalize">Fort Walton Beach</span><span> (17)</span></li>
  <li><span class="capitalize">Gainesville</span><span> (58)</span></li>
  <li><span class="capitalize">Greenacres</span><span> (9)</span></li>
  <li><span class="capitalize">Hallandale Beach</span><span> (11)</span></li>
  <li><span class="capitalize">Havana</span><span> (6)</span></li>
  <li><span class="capitalize">Hollywood</span><span> (22)</span></li>
  <li><span class="capitalize">Hudson</span><span> (5)</span></li>
  <li><span class="capitalize">Immokalee</span><span> (6)</span></li>
  <li><span class="capitalize">Jacksonville</span><span> (214)</span></li>
  <li><span class="capitalize">Key West</span><span> (9)</span></li>
  <li><span class="capitalize">Kissimmee</span><span> (31)</span></li>
  <li><span class="capitalize">Lake City</span><span> (6)</span></li>
  <li><span class="capitalize">Lake Wales</span><span> (8)</span></li>
  <li><span class="capitalize">Lake Worth</span><span> (26)</span></li>
  <li><span class="capitalize">Lakeland</span><span> (45)</span></li>
  <li><span class="capitalize">Lantana</span><span> (8)</span></li>
  <li><span class="capitalize">Largo</span><span> (17)</span></li>
  <li><span class="capitalize">Lauderdale Lakes</span><span> (15)</span></li>
  <li><span class="capitalize">Lauderhill</span><span> (21)</span></li>
  <li><span class="capitalize">Lecanto</span><span> (7)</span></li>
  <li><span class="capitalize">Leesburg</span><span> (22)</span></li>
  <li><span class="capitalize">Live Oak</span><span> (6)</span></li>
  <li><span class="capitalize">Longwood</span><span> (10)</span></li>
  <li><span class="capitalize">Lutz</span><span> (5)</span></li>
  <li><span class="capitalize">Maitland</span><span> (5)</span></li>
  <li><span class="capitalize">Margate</span><span> (11)</span></li>
  <li><span class="capitalize">Marianna</span><span> (6)</span></li>
  <li><span class="capitalize">Melbourne</span><span> (23)</span></li>
  <li><span class="capitalize">Miami</span><span> (468)</span></li>
  <li><span class="capitalize">Milton</span><span> (6)</span></li>
  <li><span class="capitalize">Miramar</span><span> (23)</span></li>
  <li><span class="capitalize">Naples</span><span> (47)</span></li>
  <li><span class="capitalize">New Port Richey</span><span> (20)</span></li>
  <li><span class="capitalize">New Smyrna</span><span> (5)</span></li>
  <li><span class="capitalize">North Port</span><span> (7)</span></li>
  <li><span class="capitalize">Oakland Park</span><span> (11)</span></li>
  <li><span class="capitalize">Ocala</span><span> (33)</span></li>
  <li><span class="capitalize">Okeechobee</span><span> (9)</span></li>
  <li><span class="capitalize">Orange Park</span><span> (7)</span></li>
  <li><span class="capitalize">Orlando</span><span> (216)</span></li>
  <li><span class="capitalize">Ormond Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Oviedo</span><span> (11)</span></li>
  <li><span class="capitalize">Pahokee</span><span> (5)</span></li>
  <li><span class="capitalize">Palatka</span><span> (13)</span></li>
  <li><span class="capitalize">Palm Bay</span><span> (8)</span></li>
  <li><span class="capitalize">Palm Beach Gardens</span><span> (8)</span></li>
  <li><span class="capitalize">Panama City</span><span> (27)</span></li>
  <li><span class="capitalize">Pembroke Pines</span><span> (24)</span></li>
  <li><span class="capitalize">Pensacola</span><span> (69)</span></li>
  <li><span class="capitalize">Perry</span><span> (5)</span></li>
  <li><span class="capitalize">Plantation</span><span> (11)</span></li>
  <li><span class="capitalize">Pompano Beach</span><span> (32)</span></li>
  <li><span class="capitalize">Port Charlotte</span><span> (15)</span></li>
  <li><span class="capitalize">Port Orange</span><span> (5)</span></li>
  <li><span class="capitalize">Port St Lucie</span><span> (17)</span></li>
  <li><span class="capitalize">Punta Gorda</span><span> (8)</span></li>
  <li><span class="capitalize">Quincy</span><span> (11)</span></li>
  <li><span class="capitalize">Riviera Beach</span><span> (36)</span></li>
  <li><span class="capitalize">Rockledge</span><span> (5)</span></li>
  <li><span class="capitalize">Royal Palm Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Sanford</span><span> (20)</span></li>
  <li><span class="capitalize">Santa Rosa Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Sarasota</span><span> (64)</span></li>
  <li><span class="capitalize">Sebring</span><span> (9)</span></li>
  <li><span class="capitalize">Spring Hill</span><span> (7)</span></li>
  <li><span class="capitalize">St Augustine</span><span> (24)</span></li>
  <li><span class="capitalize">St Petersburg</span><span> (137)</span></li>
  <li><span class="capitalize">Starke</span><span> (5)</span></li>
  <li><span class="capitalize">Stuart</span><span> (23)</span></li>
  <li><span class="capitalize">Sunrise</span><span> (16)</span></li>
  <li><span class="capitalize">Tallahassee</span><span> (131)</span></li>
  <li><span class="capitalize">Tamarac</span><span> (5)</span></li>
  <li><span class="capitalize">Tampa</span><span> (221)</span></li>
  <li><span class="capitalize">Tarpon Springs</span><span> (7)</span></li>
  <li><span class="capitalize">Titusville</span><span> (13)</span></li>
  <li><span class="capitalize">Venice</span><span> (15)</span></li>
  <li><span class="capitalize">Vero Beach</span><span> (31)</span></li>
  <li><span class="capitalize">West Palm Beach</span><span> (135)</span></li>
  <li><span class="capitalize">Winter Garden</span><span> (6)</span></li>
  <li><span class="capitalize">Winter Haven</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Park</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Springs</span><span> (5)</span></li>
</ul>

https://codepen.io/Talamihg/pen/WjMYNd


Solution 1:

You can use CSS columns and the height will adapt based on the content.

ul {
  column-count: 4;
  list-style: none;
  background: #eee;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
  <li>N</li>
  <li>O</li>
  <li>P</li>
  <li>Q</li>
  <li>R</li>
  <li>S</li>
  <li>T</li>
  <li>U</li>
  <li>V</li>
  <li>W</li>
  <li>X</li>
  <li>Y</li>
  <li>Z</li>
</ul>

Solution 2:

Flex items cannot wrap if they don't run into a height or width limitation on the container. This limit serves as a break-point. Otherwise, why would they wrap? Without a fixed height or width, they have no reason to wrap.

This isn't an issue in row-direction because block-level elements are, by default, limited to the width of their parent. So a flex container is initially set, in effect, to width: 100%.

But there is no such limit on height. Block-level elements are initially set to height: auto, which is the height of their content.

Therefore, in order for flex items to wrap in column-direction, the container must have a fixed height (height, max-height, flex-basis all work).

EXCEPT... if the layout spans the entire viewport height (which seems to be the case here), then all that is needed is height: 100vh. This allows the height to be both dynamic and fixed. Flex items can now wrap in column direction.

.other-nearby-cities {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

li {
  width: 25%;
  padding: 10px;
  list-style-type: none;
}

* {
  margin: 0;
  box-sizing: border-box;
}
<ul class="other-nearby-cities">
  <li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
  <li><span class="capitalize">Apopka</span><span> (11)</span></li>
  <li><span class="capitalize">Arcadia</span><span> (11)</span></li>
  <li><span class="capitalize">Auburndale</span><span> (5)</span></li>
  <li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
  <li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
  <li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
  <li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
  <li><span class="capitalize">Bradenton</span><span> (46)</span></li>
  <li><span class="capitalize">Brandon</span><span> (16)</span></li>
  <li><span class="capitalize">Brooksville</span><span> (8)</span></li>
  <li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
  <li><span class="capitalize">Clearwater</span><span> (90)</span></li>
  <li><span class="capitalize">Clewiston</span><span> (9)</span></li>
  <li><span class="capitalize">Cocoa</span><span> (18)</span></li>
  <li><span class="capitalize">Crystal River</span><span> (6)</span></li>
  <li><span class="capitalize">Dania Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Davie</span><span> (14)</span></li>
  <li><span class="capitalize">Daytona Beach</span><span> (40)</span></li>
  <li><span class="capitalize">Deerfield Beach</span><span> (15)</span></li>
  <li><span class="capitalize">Deland</span><span> (15)</span></li>
  <li><span class="capitalize">Delray Beach</span><span> (41)</span></li>
  <li><span class="capitalize">Englewood</span><span> (5)</span></li>
  <li><span class="capitalize">Fort Lauderdale</span><span> (132)</span></li>
  <li><span class="capitalize">Fort Myers</span><span> (79)</span></li>
  <li><span class="capitalize">Fort Pierce</span><span> (41)</span></li>
  <li><span class="capitalize">Fort Walton Beach</span><span> (17)</span></li>
  <li><span class="capitalize">Gainesville</span><span> (58)</span></li>
  <li><span class="capitalize">Greenacres</span><span> (9)</span></li>
  <li><span class="capitalize">Hallandale Beach</span><span> (11)</span></li>
  <li><span class="capitalize">Havana</span><span> (6)</span></li>
  <li><span class="capitalize">Hollywood</span><span> (22)</span></li>
  <li><span class="capitalize">Hudson</span><span> (5)</span></li>
  <li><span class="capitalize">Immokalee</span><span> (6)</span></li>
  <li><span class="capitalize">Jacksonville</span><span> (214)</span></li>
  <li><span class="capitalize">Key West</span><span> (9)</span></li>
  <li><span class="capitalize">Kissimmee</span><span> (31)</span></li>
  <li><span class="capitalize">Lake City</span><span> (6)</span></li>
  <li><span class="capitalize">Lake Wales</span><span> (8)</span></li>
  <li><span class="capitalize">Lake Worth</span><span> (26)</span></li>
  <li><span class="capitalize">Lakeland</span><span> (45)</span></li>
  <li><span class="capitalize">Lantana</span><span> (8)</span></li>
  <li><span class="capitalize">Largo</span><span> (17)</span></li>
  <li><span class="capitalize">Lauderdale Lakes</span><span> (15)</span></li>
  <li><span class="capitalize">Lauderhill</span><span> (21)</span></li>
  <li><span class="capitalize">Lecanto</span><span> (7)</span></li>
  <li><span class="capitalize">Leesburg</span><span> (22)</span></li>
  <li><span class="capitalize">Live Oak</span><span> (6)</span></li>
  <li><span class="capitalize">Longwood</span><span> (10)</span></li>
  <li><span class="capitalize">Lutz</span><span> (5)</span></li>
  <li><span class="capitalize">Maitland</span><span> (5)</span></li>
  <li><span class="capitalize">Margate</span><span> (11)</span></li>
  <li><span class="capitalize">Marianna</span><span> (6)</span></li>
  <li><span class="capitalize">Melbourne</span><span> (23)</span></li>
  <li><span class="capitalize">Miami</span><span> (468)</span></li>
  <li><span class="capitalize">Milton</span><span> (6)</span></li>
  <li><span class="capitalize">Miramar</span><span> (23)</span></li>
  <li><span class="capitalize">Naples</span><span> (47)</span></li>
  <li><span class="capitalize">New Port Richey</span><span> (20)</span></li>
  <li><span class="capitalize">New Smyrna</span><span> (5)</span></li>
  <li><span class="capitalize">North Port</span><span> (7)</span></li>
  <li><span class="capitalize">Oakland Park</span><span> (11)</span></li>
  <li><span class="capitalize">Ocala</span><span> (33)</span></li>
  <li><span class="capitalize">Okeechobee</span><span> (9)</span></li>
  <li><span class="capitalize">Orange Park</span><span> (7)</span></li>
  <li><span class="capitalize">Orlando</span><span> (216)</span></li>
  <li><span class="capitalize">Ormond Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Oviedo</span><span> (11)</span></li>
  <li><span class="capitalize">Pahokee</span><span> (5)</span></li>
  <li><span class="capitalize">Palatka</span><span> (13)</span></li>
  <li><span class="capitalize">Palm Bay</span><span> (8)</span></li>
  <li><span class="capitalize">Palm Beach Gardens</span><span> (8)</span></li>
  <li><span class="capitalize">Panama City</span><span> (27)</span></li>
  <li><span class="capitalize">Pembroke Pines</span><span> (24)</span></li>
  <li><span class="capitalize">Pensacola</span><span> (69)</span></li>
  <li><span class="capitalize">Perry</span><span> (5)</span></li>
  <li><span class="capitalize">Plantation</span><span> (11)</span></li>
  <li><span class="capitalize">Pompano Beach</span><span> (32)</span></li>
  <li><span class="capitalize">Port Charlotte</span><span> (15)</span></li>
  <li><span class="capitalize">Port Orange</span><span> (5)</span></li>
  <li><span class="capitalize">Port St Lucie</span><span> (17)</span></li>
  <li><span class="capitalize">Punta Gorda</span><span> (8)</span></li>
  <li><span class="capitalize">Quincy</span><span> (11)</span></li>
  <li><span class="capitalize">Riviera Beach</span><span> (36)</span></li>
  <li><span class="capitalize">Rockledge</span><span> (5)</span></li>
  <li><span class="capitalize">Royal Palm Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Sanford</span><span> (20)</span></li>
  <li><span class="capitalize">Santa Rosa Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Sarasota</span><span> (64)</span></li>
  <li><span class="capitalize">Sebring</span><span> (9)</span></li>
  <li><span class="capitalize">Spring Hill</span><span> (7)</span></li>
  <li><span class="capitalize">St Augustine</span><span> (24)</span></li>
  <li><span class="capitalize">St Petersburg</span><span> (137)</span></li>
  <li><span class="capitalize">Starke</span><span> (5)</span></li>
  <li><span class="capitalize">Stuart</span><span> (23)</span></li>
  <li><span class="capitalize">Sunrise</span><span> (16)</span></li>
  <li><span class="capitalize">Tallahassee</span><span> (131)</span></li>
  <li><span class="capitalize">Tamarac</span><span> (5)</span></li>
  <li><span class="capitalize">Tampa</span><span> (221)</span></li>
  <li><span class="capitalize">Tarpon Springs</span><span> (7)</span></li>
  <li><span class="capitalize">Titusville</span><span> (13)</span></li>
  <li><span class="capitalize">Venice</span><span> (15)</span></li>
  <li><span class="capitalize">Vero Beach</span><span> (31)</span></li>
  <li><span class="capitalize">West Palm Beach</span><span> (135)</span></li>
  <li><span class="capitalize">Winter Garden</span><span> (6)</span></li>
  <li><span class="capitalize">Winter Haven</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Park</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Springs</span><span> (5)</span></li>
</ul>

revised codepen

Another option is CSS Grid. See this post:

  • Make a div span two rows in a grid

Related

MySQL: Querying for unicode entities
Direct call of a functional component
How to preserve integer data type when exporting to JSON?
LINQ to Entities does not recognize the method 'System.String[] Split(Char[])' method,
VBA Subscript out of range - error 9
python dict.add_by_value(dict_2)?
How to continue insertion after duplicate key error using PyMongo
Destructuring Nested objects in javascript | Destructure second level parent and child Objects
How to force NASM to encode [1 + rax*2] as disp32 + index*2 instead of disp8 + base + index?
Print without newline under function doesn't work as it should in Python
How do I print the method body reflectively?
MySQL table -> Can you return the same row multiple times, in the same query?