响应式布局问题：父div添加flex-direction:column后图片div消失

问题 #

当屏幕宽度小于1200px时，给.data容器设置flex-direction:column后，图片对应的<div class="slikacontainer">完全消失，其他元素响应式表现正常，无法对其进行宽度等适配编辑。

相关代码 #

HTML代码 #

<div class="data">
<div class="dataispod">
<div class = "detaljilevo">
    <div class="detaljilevosub">
        [...]
    </div>

    <div id="buttonwrapperdetalji">
        [...]
    </div>
</div>

<div class="slikacontainer">
    <div class="slikawrap" style="background-image: url('../slike/<?=$podaci->slika?>')"></div>
</div>
</div>
</div>

CSS代码 #

.data {
    margin: 80px 60px 0px 80px;
    position: relative;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 400px;
    width: 70%;
}

.dataispod {
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 100%;
}

.slikacontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 50%;
}

.slikawrap {
    height: 80%;
    width: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 5px;
    border: none;
}

@media screen and (max-width: 1200px) {

.data {
        margin: 20px 60px 30px 60px;
        position: relative;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        max-height: 1000px;
        min-width: 50%;
        margin-bottom: 30px;
        position: relative;
    }
    
    .dataispod {
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 500px;
        width: 100%;
    }
}

解决方案 #

修改媒体查询中的CSS，调整.dataispod的高度属性，并给.slikacontainer指定高度和合适的宽度：

@media screen and (max-width: 1200px) {
    .data {
        margin: 20px 60px 30px 60px;
        position: relative;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        max-height: 1000px;
        min-width: 50%;
        margin-bottom: 30px;
    }
    
    .dataispod {
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 500px; /* 替换固定height为min-height，允许容器自适应内容高度 */
        width: 100%;
        padding: 20px 0; /* 增加内边距，避免内容拥挤 */
    }

    .slikacontainer {
        width: 80%; /* 调整宽度适配移动端 */
        height: 40%; /* 给容器设置高度，确保背景图有显示空间 */
        margin-top: 20px; /* 与左侧内容拉开间距 */
    }
}

原因分析 #

1. 原代码中.dataispod使用固定height:500px，切换为flex column布局后，.detaljilevo可能占据了全部可用高度，导致.slikacontainer被挤压得没有高度空间，背景图无法显示。
2. .slikacontainer仅设置了宽度，未指定高度，在flex column布局下容器高度默认由内容决定，而.slikawrap的高度是父元素的80%，父元素无高度时它也会失去显示空间。

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