JSFiddle - React, Tailwind, and code Playground

HTML

<body>
         <div class="box">
             <div class="in">
                 <div class="item">1</div>
                 <div class="item">2</div>
                 <div class="item">3</div>
             </div>
         </div>
    </body>
    <!-- 第三个并没有把父元素宽度撑开 -->

CSS

*{
                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;
            }