Div 大小基于兄弟姐妹的大小答案

【问题标题】：Div sized based on sibling's sizeDiv 大小基于兄弟姐妹的大小
【发布时间】：2017-02-25 18:38:02
【问题描述】：

如果可能的话，我希望能够根据其兄弟 (#div2) 的高度动态设置 div（我们称之为 #div1）的高度。 #div2 将使用 JavaScript 调整大小，但我希望 #div1 的大小可以自动更改。父 div 也会根据其两个子元素（#div1 和 #div2）的大小调整大小。

我已经尝试过为此使用 CSS flexbox，并且非常接近。假设我想确保#div1 是#div2 高度的20%。我可以将display: flex; flex-direction: column 申请给父母，给#div2 flex-grow: 5 并将flex-grow: 1 给#div1。这很好用，几乎完全符合我的要求。

我需要一种方法来使用这个 flexbox 布局，但我需要该布局基于兄弟的大小而不是父的大小来工作。我的解决方案 (https://jsfiddle.net/pg3b9n6h/1/) 需要设置父级大小，而我希望父级和兄弟级都根据 #div2 中的大小变化进行更新。

这可能吗？

【问题讨论】：

不认为如果不设置父 div 大小这是可能的，但我想有一种方法可以调整父 div 和兄弟 div 以匹配沿交叉轴的 div 高度 - 请参阅@987654322 @

标签： css layout flexbox

【解决方案1】：

是的：），方法如下：

function changeHeight(amount){
  const subStyle = document.querySelector('.main .sub').style;
  subStyle.height = parseInt(subStyle.height, 10) + amount + 'px';
}

.main {
  background-color: red;
  position: relative;
  width: 100px;
}
.sub {
  padding-bottom: 100%;
  background-color: green;
}
.sub2 {
  background-color: blue;
  position: absolute;
  top: 50%;
  height: 50%;
  width: 100%;
}

<button onclick='changeHeight(100)'>+100px</button>
<button onclick='changeHeight(-100)'>-100px</button>
<div class="main">
  <div class="sub" style='height: 100px'></div>
  <div class="sub2"></div>
</div>

编辑：如果有人反对我，请解释原因，以便我可以从中学习！

【讨论】：

谢谢。我认为这被否决了，因为该问题询问了仅 CSS 的解决方案。不过这绝对有用。