时间戳

首页 > 解决方案 > 将元素高度设置为跟随显示 flex 行中的兄弟高度

html - 将元素高度设置为跟随显示 flex 行中的兄弟高度

问题描述

我的项目中有以下结构：

<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A"><div>
    </div>
    <div class="uneditable">
      <div class="B"></div>
    </div>
  </div>
  ...
</div>

我对这种结构有以下限制：

我要做的是设置这种结构的样式，以便A类的主要高度超过B，也就是说，如果A高度增加，B将有更多的高度来匹配A 的高度，如果A更小，B将具有相同的高度高度为A

我试图在A和B类中设置增长和收缩值。我也可以将显示更改为网格，但在我的情况下不是首选。

有没有办法在不使用 javascript 来设置元素样式的情况下使这种高度依赖？

[更新]

在这里找到了我的问题的答案。解决方案是对 super-child 的所有孩子使用以下样式，除了第一个。

height: 0;
min-height: 100%;

之所以有效，是因为高度定义的这种结合可以理解为“没有高度，只是足够扩展而不突破边界”

标签： htmlcssheightdisplay

解决方案

...我会为此使用网格，而不是 flex并注意结束标记:)，flex 将需要一些 js 来更新高度：

列中的示例，因为在一行中不应该是一个问题

.super-child {
  display: grid;
  grid-auto-rows: 1fr;
}
.super-child > .uneditable {
  border: solid;
}
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A <br> AA</div>
    </div>
    <div class="uneditable">
      <div class="B"> B</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A </div>
    </div>
    <div class="uneditable">
      <div class="B"> B<br> BB</div>
    </div>
  </div>
</div>

...并排：

.super-child {
  display: flex;
}
.super-child > .uneditable {
  border: solid;
  flex:1;
  
  
  /* demo purpose to resize heights */
  overflow-y:scroll;
  resize:vertical
}
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A <br> AA</div>
    </div>
    <div class="uneditable">
      <div class="B"> B</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A </div>
    </div>
    <div class="uneditable">
      <div class="B"> B<br> BB</div>
    </div>
  </div>
</div>

推荐阅读