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>
解决方法
.first,.second { overflow:hidden }