CSS flex布局高度溢出，容器未被均分

最新推荐文章于 2024-07-12 08:51:16 发布

TA_WORLD

最新推荐文章于 2024-07-12 08:51:16 发布

阅读量751

点赞数 1

分类专栏： CSS 文章标签： css 前端 css3 flex 溢出

本文链接：https://blog.csdn.net/qq_56303170/article/details/126023579

版权

CSS flex flex-direction: column 图片高度调整 overflow: hidden 容器高度控制

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS flex布局高度溢出，容器未被均分

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ExpendingCards</title>
    <style>
        .container {
            width: 400px;
            height: 400px;
            display: flex;
            flex-direction: column;
        }
        .first {
            width: 100%;
            height: 100%;
            background-color: red;
        }
        .second {
            width: 100%;
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="first"></div>
        <div class="second"></div>
    </div>
</body>
</html>

但是加入图片之后，各部分的容器高度就发生了变化
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ExpendingCards</title>
   <style>
       .container {
           width: 400px;
           height: 400px;
           display: flex;
           flex-direction: column;
       }
       .first {
           width: 100%;
           height: 100%;
           background-color: red;
       }
       .second {
           width: 100%;
           height: 100%;
           background-color: blue;
       }
       img{
           width: 100%;
           height: 100%;
       }
   </style>
</head>

<body>
   <div class="container">
       <div class="first">
           <img src="https://ts1.cn.mm.bing.net/th/id/R-C.901f8ebdab22d065baefeae6c2701cc0?rik=Z3Hew18zFaF%2bLQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f20120418lw%2f13.jpg&ehk=Es5ZGH90h%2foCghvlIwdKfUiqpO05gLSgOEBU2i0Mwok%3d&risl=&pid=ImgRaw&r=0" alt="">
       </div>
       <div class="second">
           <img src="https://ts1.cn.mm.bing.net/th/id/R-C.901f8ebdab22d065baefeae6c2701cc0?rik=Z3Hew18zFaF%2bLQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f20120418lw%2f13.jpg&ehk=Es5ZGH90h%2foCghvlIwdKfUiqpO05gLSgOEBU2i0Mwok%3d&risl=&pid=ImgRaw&r=0" alt="">
       </div>
   </div>
</body>
</html>