CSS Flex 布局中的左右等高布局

在使用 CSS Flex 布局进行左右布局时，若左右高度不定，如何设置边框保持到最底部？

基于当前结构的方法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 为 .rht 和 .lft 盒子添加 height: min-content;，使其根据子元素内容撑开高度。
• 使用 JQuery 获取 .rht 高度并赋值给 .lft 子元素 <div> 的高度，保证高度一致。

使用新的结构实现：

立即学习“前端免费学习笔记（深入）”；

建议采用新的结构实现，无需使用 JQuery：

• 去除固定高度的 .top 容器。
• 将 .content 容器高度改为 height: min-content;，自适应内容撑开高度。
• 设置 .rht 宽度为固定值（如示例中的 600px），flex-shrink: 0; 防止缩小。
• 在 .lft 中添加一个内部 <div> 元素，高度设为 height: 100%;，撑开高度与 .rht 一致。