CSS操作的计算顺序

Question

这是我的问题的最小示例：

<div class="container">
  <div class="dependent__height"></div>
  <div class="source__height"></div>
</div>

.container {
  display: flex;
  height: 500px; /* should not be there */
}
.dependent__height {  
  aspect-ratio: 16 / 9;
  background-color: yellow;
}

.source__height {
  width: 10px;
  height: 500px; /* can change arbitrary */
  background-color: tomato;
}

我想要实现的是

.container

不会设置高度，高度的唯一来源是

.source__height

。它会在运行时发生变化，一切都应该正常工作。我没有附加到弹性盒或其他东西，我只是想得到想要的行为（宽度将根据长宽比和

.source__height

的高度计算）

我尝试了很多跳跃，还有 JavaScript。如果使用 MutationObserver 和同步高度，JavaScript 可能会工作，但非常笨拙，对于我的用例来说，编写和维护会非常痛苦。

如果

.container

设置了高度，则可以正常工作：

但如果

height

属性被删除则不然：

注意：在现实场景中，我使用

<img>

，问题大致相同，可以通过该问题的解决方案来解决。如果你想要更多真实世界的例子，我也可以添加。

Answer 1

这是一种通过网格实现您想要的效果的方法：

.container {
  display: grid;
  grid-template-columns: 100% max-content;
}

.dependent__height {
  aspect-ratio: 16 / 9;
  background-color: yellow;
}

.source__height {
  width: 10px;
  height: 500px;
  /* can change arbitrary */
  background-color: tomato;
}

<div class="container">
  <div class="dependent__height"></div>
  <div class="source__height"></div>
</div>

但是，如果宽度不够，则 16/9 的依赖高度将无法在该纵横比下增长到所需的完整高度。一种解决方案是将高度设置为 100%，但这会导致其溢出容器（添加轮廓以说明这一点）：

.container {
  display: grid;
  grid-template-columns: 100% max-content;
  outline: 4px solid skyblue;
}

.dependent__height {
  aspect-ratio: 16 / 9;
  height: 100%;
  background-color: yellow;
}

.source__height {
  width: 10px;
  height: 500px;
  /* can change arbitrary */
  background-color: tomato;
}

<div class="container">
  <div class="dependent__height"></div>
  <div class="source__height"></div>
</div>

希望这足以让您玩并获得您想要的东西，如果这不能完全回答所有问题，请通过编辑为您的问题添加详细信息，我可以更新我的答案