flex布局左右同高
在flex布局中，左右布局的元素高度不一致时，想要让边框延伸到最大高度，可以采用以下方法：
基于当前结构的方法：
.rht {
height: min-content;
}这样可以使弹性盒子被子盒子内容撑开。
let h = $(".rht").height() + 'px';
$(".lft div").css({
height: h
});使用新的结构实现：
通过改变html结构，可以使用flex布局本身的功能实现左右同高：
<div class="content">
<div class="lft"></div>
<div class="rht">
<!-- 内容 -->
</div>
</div>.content {
display: flex;
height: min-content;
}
.lft {
flex: 1;
overflow-y: auto;
}
.rht {
width: 600px;
flex-shrink: 0;
height: min-content;
overflow-y: auto;
}通过设置.rht高度为min-content，可以使其被子元素内容撑开。同时，设置.lft的overflow-y为auto，可以启用滚动条，避免内容超出父元素溢出。
以上就是Flex 布局左右同高怎么实现？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
927
收藏
