如何将嵌套正方形结构改为水平布局，实现小方块垂直堆叠？

要实现底部小方块垂直堆叠且保留大正方形原有布局，只需修改两处CSS规则：

• 调整.smallHolder的flex布局方向，将内部元素从水平排列改为垂直排列
• 修改小方块的宽高比例，让它们占满容器宽度并平分垂直空间

修改后的完整CSS代码：

.date-grid {
    width: 120px;
    height: 100px;
    display: flex;
    flex-direction: column;
}

.node {
    width: 100%;
    height: 100%;
    background: #e9ecef;
    border: none;
    padding: 0;
}

time {
    display: block;
    height: 75%;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
  
.smallHolder {
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: column; /* 改为垂直排列 */
}
  
.smallHolder>div {
    width: 100%; /* 占满容器宽度 */
    height: 50%; /* 垂直方向各占一半高度 */
    flex-shrink: 0;
    flex-grow: 1;
}
  
.next { background: #0060df; }  

.last { background: #d53343; }

HTML部分无需改动，保持原样即可：

<div class="date-grid">
    <button class="node">
        <time>3</time>
        <div class="smallHolder">
            <div class="next"></div>
            <div class="last"></div>
        </div>   
    </button>
</div>

修改后，大正方形的整体布局完全保留，底部的两个小方块会变为垂直堆叠样式，背景色也能正常显示。

内容的提问来源于stack exchange，提问作者Raphael Santos