flex布局左右同高
在flex布局中，左右布局的元素高度不一致时，想要让边框延伸到最大高度，可以采用以下方法：
基于当前结构的方法：
给.rht和.lft盒子添加：
.rht { height: min-content;}
这样可以使弹性盒子被子盒子内容撑开。
使用javascript获取.rht的高度并赋值给.lft的子盒子div：
let h = $(".rht").height() + 'px';$(".lft div").css({ height: h});
使用新的结构实现：
通过改变html结构，可以使用flex布局本身的功能实现左右同高：
.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 布局左右同高怎么实现？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632403.html
微信扫一扫 
支付宝扫一扫 
