css之flex布局

最新推荐文章于 2024-05-08 22:33:14 发布

小爬犁

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量72

点赞数

分类专栏： html布局文章标签： css css3 前端

本文链接：https://blog.csdn.net/yhl521112/article/details/129422591

版权

html布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

flex 布局常见问题

flex容器容易被子内容高度或者宽度撑开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;box-sizing: border-box;}
			html,body{width: 100%;height: 100%;overflow: hidden;text-align: center;line-height: 100px;}
			
			.p_box{ width: 100%; height: 100%; overflow:hidden; border: 2px solid red; display: flex; flex-direction: column; }
			.s_box{ width: 100%; height: 100%; min-height:0; border: 2px solid yellow; background-color: gainsboro;overflow-y: auto;}
			.ss_box{ height: 1000px; }
			.b_box{height: 100px; border: 2px solid green;flex-shrink: 0;}
		</style>
	</head>
	
	<body>
		<div class="p_box">
			<div class="s_box">
				<div class="v_box">
					<div class="ss_box">flex 容器不被撑开的设置方法，子内容高度1000px</div>
				</div>
			</div>
			<div class="b_box">不允许被压缩的内容</div>
		</div>
	</body>
</html>