javascript - 如何根据兄弟元素尺寸计算元素尺寸？

Question

我正在尝试找到一种方法来根据元素的同级元素的高度来计算元素的高度。在下面的代码片段中， child 1 和 3 的高度为 20%，最大高度为 70px。我需要找到一种方法让 child 2 填充剩余的高度，而不管容器大小如何，容器大小是可变的 height: calc(100vh - 12vmin - 40px);。我已经尝试过媒体查询和 calc() 函数，但由于容器高度可变，两者都不起作用。我在想我将需要使用 JS，但是没有它的任何解决方案都是可取的。

感谢您的帮助!

附言如果你有 JS 的解决方案，请使用 vanilla JS。

#container {
  border: 4px solid #000000;
  box-sizing: border-box;
  height: calc(100vh - 12vmin - 40px);
  max-width: 600px;
  width: 100%;
}

#childOne {
  border: 2px solid blue;
  box-sizing: border-box;
  height: 20%;
  max-height: 70px;
}

#childTwo {
  border: 2px solid red;
  box-sizing: border-box;
  height: 60%;
}

#childThree {
  border: 2px solid yellow;
  box-sizing: border-box;
  height: 20%;
  max-height: 70px;
}

<div id="container">
  <div id="childOne"></div>
  <div id="childTwo"></div>
  <div id="childThree"></div>
</div>

Answer 1

CSS flexbox 是可行的方法。

将容器的高度更改为height: 100vh，添加display: flex 和flex-direction: column。

对于 childTwo，完全删除高度设置并添加 flex:1。

    body {
        margin: 0;
        padding: 0;
    }
    
    #container {
      border: 4px solid #000000;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: 100vh;
      max-width: 600px;
      width: 100%;
    }

    #childOne {
      border: 2px solid blue;
      box-sizing: border-box;
      height: 20%;
      max-height: 70px;
    }

    #childTwo {
      border: 2px solid red;
      box-sizing: border-box;
      flex: 1;
    }

    #childThree {
      border: 2px solid yellow;
      box-sizing: border-box;
      height: 20%;
      max-height: 70px;
    }

    <div id="container">
      <div id="childOne"></div>
      <div id="childTwo"></div>
      <div id="childThree"></div>
    <div>