Flex 布局左右同高怎么实现？

左右同高

在flex布局中，左右布局的元素高度不一致时，想要让边框延伸到最大高度，可以采用以下方法：

基于当前结构的方法：

1. 给.rht和.lft盒子添加：

.rht {
    height: min-content;
}

登录后复制

这样可以使弹性盒子被子盒子内容撑开。

1. 使用javascript获取.rht的高度并赋值给.lft的子盒子div：

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的-y为auto，可以启用滚动条，避免内容超出父元素溢出。

以上就是Flex 布局左右同高怎么实现？的详细内容，更多请关注米云其它相关文章！