html - 增加跨度高度

Question

如何获得绿色div具有与红色 div 相同的可变高度？ 这意味着当绿色文本增长时，红色框的高度也会增长到与绿色框相同。 我知道我可以删除 span来自.aaa ，但对于其他代码影响，这不是可行的解决方案。 .aaa span必须保留。

.aaa span {
  display: flex;
  padding: 20px;
  font-size: 1.6em;
}

.bbb {
  width: 50%;
  float: left;
  text-align: left;
  color: black;
  background: red;
}

.ccc {
  width: 30%;
  text-align: center;
  background-color: green;
}

<div class="wrapper">
  <div class="aaa"><span class="bbb">Hello hello hello hello hello Hello hello hello hello hellotitle titletitle titletitle titletitle titletitle titletitle title</span>
    <span class="ccc">12345</span>
  </div>
</div>

f F

Answer 1

像这样分割你的第一个 CSS 规则:

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

flex 属性需要分配给容器，而不是分配给跨度。并且 float 不是必需的。

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

.bbb {
  width: 50%;
  text-align: left;
  color: black;
  background: red;
}

.ccc {
  width: 30%;
  text-align: center;
  background-color: green;
}

<div class="wrapper">
  <div class="aaa"><span class="bbb">Hello hello hello hello hello Hello hello hello hello hellotitle titletitle titletitle titletitle titletitle titletitle title</span>
    <span class="ccc">12345</span>
  </div>
</div>