सीएसएस फ्लेक्स कॉलम रैप बिना किसी ऊंचाई के पूर्व-सेट और कई स्तंभों को मजबूर करता है

उदाहरण कोड: https://jsfiddle.net/z7ybks9u/2/

प्रेरणा: मैं 3 कॉलम लेआउट को बाध्य करना चाहता हूं, निश्चित चौड़ाई के लिए समर्थन के साथ लेकिन परिवर्तनीय ऊंचाई DIVS, बुद्धि लेआउट दक्षता जो आइटम के बीच बड़े "व्हाइटस्पेस छेद" को उजागर नहीं करेगा . चूंकि तत्वों की संख्या अज्ञात है, मैं फ्लेक्स कंटेनर की ऊंचाई को सीमित नहीं कर सकता।

समस्या: फ्लेक्स कंटेनर की ऊंचाई को मजबूर किए बिना, मैं एक से अधिक कॉलम नहीं देख सकता, क्योंकि यह केवल एक कॉलम में सभी आइटम फिट करने के लिए आवश्यक लंबवत स्थान का उपयोग करता है।

मुझे क्या करने के लिए मजबूर किया जाता है:

gallery-height {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      max-height: 700px;   <-----  NEED TO DO THAT TO SEE COLUMNS BUT I HAVE TO SUPPORT UNKNOWN NBR OF ELEMENTS
    }