如何让div完整展示溢出内容，解决小屏场景下下方元素被重叠问题

当前布局异常的核心原因是.midContainer设置了固定高度height: 30vh，小屏断点触发后两个子div宽度变为100%纵向排列，总高度超过父容器固定高度限制，导致内容溢出、和下方元素重叠。

1. 修改父容器高度规则 #

将父容器的固定高度改为最小高度，既保留大屏下的基础显示高度，又允许小屏时随内容自动撑开：

.midContainer{
    width: 100%;
    /* 替换固定height为min-height */
    min-height: 30vh;
    max-height: 700px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    justify-content: space-between;
    margin-bottom: 15px;
}

2. 子元素新增溢出规则 #

给两个子div添加内部滚动规则，避免内容过长时撑破布局：

.tokenInfoBox{
    width: 60%;
    height: 100%;
    max-height: 700px;
    /* 内容超出时内部滚动 */
    overflow: auto;
    background-color: #1b1b1c;
    border-radius: 10px 0 0 10px;
}

.ticketBox{
    width: 40%;
    height : 100%;
    background-color: #0e0304;
    box-sizing: border-box;
    /* 内容超出时内部滚动 */
    overflow: auto;
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
}

3. 优化媒体查询适配 #

小屏下取消子元素固定高度限制，同时适配圆角样式：

@media only screen and (max-width: 1060px) { 
    .tokenInfoBox, .ticketBox { 
         width: 100%; 
         height: auto; /* 允许子元素高度随内容自适应 */
    }
    /* 适配小屏下纵向排列的圆角显示 */
    .tokenInfoBox {
        border-radius: 10px 10px 0 0;
    }
    .ticketBox {
        border-radius: 0 0 10px 10px;
    }
}

修改说明 #

• 父容器使用min-height替代固定高度，避免了小屏内容增加时被高度限制导致的溢出问题，同时保留了大屏下最小30vh的显示效果。
• 子元素新增overflow: auto，保证内容过长时仅在子元素内部滚动，不会影响整体布局。
• 媒体查询内的height: auto取消了小屏下子元素继承的100%高度限制，配合父容器的自适应高度规则，彻底解决内容重叠问题。

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