Can Flex Items Wrap in a Container with Dynamic Height

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>

Flexbox for fixed-height container that wraps items and has dynamic width

You can use grid's autofill property, so you don't need to know the number of columns.

  .my-container {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, minmax(45px, 1fr));
    background-color: rgb(33, 150, 243);
    padding: 15px;
    height: 600px;
    width: fit-content;
}

.my-item {
    width: 250px;
    height: 25px;
    color: white;
    padding: 10px;
    flex: 0 0 auto;
}

JSFiddle Demo: https://jsfiddle.net/92sak0zc/6/

Flexbox: variable/dynamic height items with column wrap

You should be able to get this layout to work with a combination of CSS columns (not CSS grid) on "desktop", and flexbox on "mobile".

<div class="container">
    <div class="d-flex d-md-columns flex-column min-vh-100">
        <div class="d-md-inline-block light order-0">
            light
        </div>
        <div class="d-md-inline-block blue order-2">
            blue
        </div>
        <div class="d-md-inline-block purple order-1">
            purple
        </div>
        <div class="d-md-inline-block yellow order-3">
            yellow
        </div>
    </div>
</div>

The only extra CSS you'll need is a media query for the columns on larger (md) desktop widths. The the flexbox ordering will kick-in on mobile..

@media (min-width: 768px) {
    .d-md-columns {
        display: inline-block !important;
        column-count: 2;
        -webkit-column-gap: 0
        -moz-column-gap: 0;
        column-gap: 0;
    }
}

https://codeply.com/go/QWIlredUTk

This works specifically for this 4 column layout. However, generally speaking flexbox columns do NOT fit together vertically like a "masonry" layout: Is it possible for flex items to align tightly to the items above them?

CSS flex-wrap how to make the height do not stretch

The default direction of flex is row, and when you use flex-wrap: wrap push overflowed element downed to another row, and the row height will default always equal to the highest element of that row, that why you seeing the element having that gap.

This can be done if you change the flex direction to column and give the wrap element a fixed height so it push overflowed element to it right, from top to bottom.

.wrap {  /*Added these*/  height: 300px;  flex-direction: column;  /*-----------*/  display: flex;  align-items: baseline;  align-content: space-around;  flex-wrap: wrap;   background-color: lightblue;
}
.box {  display: flex;  background-color: tomato;  box-sizing: border-box;  border: 1px solid #C4C4C4;  height: 100px;  width: 45%;  margin-top: 15px;}
.box1, .box5 {  height: 20px;}

  <div class="wrap">    <div class="box box1">box1</div>    <div class="box box2">box2</div>    <div class="box box3">box3</div>    <div class="box box4">box4</div>    <div class="box box5">box5</div>    <div class="box box6">box6</div>  </div>

  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);

.nav {
  display: flex;
  list-style: none;
}

.nav li {
  margin: 10px;
  background: aqua;
  width: 100px;
}

.menu-item {
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  background-color: pink;
  
}
  
.submenu  ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
}
  
.submenu  li {
  background-color: yellow;
}

.menu-item:hover .submenu {
  display: flex;
}

<ul class="nav">
  <li class="menu-item">Nav 1
    <div class="submenu">
      <ul>
        <li>Subnav 1</li>
        <li>Subnav 2</li>
        <li>Subnav 3</li>
        <li>Subnav 4</li>
        <li>Subnav 5</li>
        <li>Subnav 6</li>
        <li>Subnav 7</li>
        <li>Subnav 8</li>
        <li>Subnav 9</li>
        <li>Subnav 10</li>
        <li>Subnav 11</li>
        <li>Subnav 12</li>
        <li>Subnav 13</li>
        <li>Subnav 14</li>
        <li>Subnav 15</li>
       </ul>
    </div></li>
  <li>Nav 2</li>
</ul>