flex-flow: el ajuste de columnas no estira el ancho del elemento principal

Cuando uso flex-flow: column wrap , el ancho del elemento principal no se alarga.

ahora

esperar

 *{ margin: 0; padding: 0; } .box{ background: #f03; position: relative; display: inline-block; /* top:10px; */ /* left: 10px; */ padding: 20px; } .in{ display: flex; align-items: center; flex-flow: column wrap; max-height: 300px; align-content: flex-start; justify-content: space-between; } .item{ background: #fe3; width: 100px; margin-bottom: 20px; height: 100px; } .item:last-child{ margin-left: 15px; }  
1
2
3

https://jsfiddle.net/p4oLk7dz/5/


¿Entonces qué debo hacer?

Está tratando de tener un contenedor flexible dentro del oder, el primero necesita la pantalla flexible para obtener el contenido del elemento a continuación

También haría algunos pequeños cambios, pero realmente depende de lo que estés tratando de lograr.

Si esto no es lo que estabas buscando, por favor coméntalo para poder mejorarlo. Espero que esto funcione 🙂

 .box{ background: #f03; position: relative; display: flex; max-width: 220px; padding: 20px; } .in{ display: flex; flex-wrap: wrap; max-width: 220px; } 
 *{ margin: 0; padding: 0; } .box{ background: #f03; position: relative; display: flex; max-width: 220px; padding: 20px; } .in{ display: flex; flex-wrap: wrap; max-width: 220px; } .item{ background: #fe3; width: 100px; margin-bottom: 20px; height: 100px; } .item-2{ order: 3; } .item-3{ margin-left: 20px; } 
   
1
2
3
 Remove the display properties from this class .box{ background: #f03; display: inline-block; display:relative; /* top:10px; */ /* left: 10px; */ padding: 20px; } and everything works !!! *{ margin: 0; padding: 0; } .box{ background: #f03; padding: 20px; } .in{ display: flex; align-items: center; flex-flow: column wrap; max-height: 300px; align-content: flex-start; justify-content: space-between; } .item{ background: #fe3; width: 100px; margin-bottom: 20px; height: 100px; } .item:last-child{ margin-left: 15px; }  
1
2
3

puede verificar el resultado aquí https://jsfiddle.net/p4oLk7dz/30/