父母的身高基于固定比例的孩子

Question

也许还有另一种方法，但没有 JavaScript。我重建了我的情况给你看。我需要将“.flex”（绿色）的最大高度设置为我的视频的高度，比例为 16/9。视频周围的容器包含可变数量的内容，我想让它们与播放器具有相同的高度，因为它是与播放器相关的内容。

我无法更改结构，所以就是这样。我更喜欢纯 CSS 解决方案。

.flex {
   max-height: calc(WHAT IS MY HEIGHT??); 
}

https://codepen.io/bbua97/pen/RwYMqJy

Answer 1

这就是你想要做的吗？ https://jsfiddle.net/UwGod/f9zda03t/3/

我的CSS：

body {
  width: 80%;
  margin-inline: auto;
  display: flex; 
  justify-content: center;
}

.flex {
  display: flex;
  border: 1px solid black;
  padding-inline: 1rem;
  background: green;
  height: 100%;
  width: 100%;
  display: flex;
  gap: 24px;
  position: relative;
}

.left {
  background: red;
  flex-basis: 20%;
}

.grid {
  display: grid; 
  gap: 24px; 
  grid-template-columns: 0.75fr 0.25fr;
  background: red; 
  flex-grow: 1; 
}

.video {
  background: blue;
  display: flex;
  justify-content: center; 
  align-items: center;
  aspect-ratio: 16 / 9;
  max-height: calc((100vw * 0.8 - 2rem) * 9 / 16);
}

.chapters {
  background: blue;
  overflow-y: auto;
  max-height: calc((100vw * 0.8 - 2rem) * 9 / 16);
  height: 100%;
}

.chapter_list {
  height: 100%;
}

如果是这样，问题不是

max-height: calc(WHAT IS MY HEIGHT??);

上的

.flex

，而是

.chapters

和

.video

上的问题。