javascript - 当一个元素增加时增加所有元素的高度(等高列)

Question

我希望所有 100% 高度的元素在 body 尺寸扩展时扩展。

在这个例子中，按下按钮会添加一个红色的 div - 相邻的两列应该拉伸(stretch)以解决这个问题。最后所有的列都应该完全到达底部，一个是蓝色然后是红色，另外两个只是蓝色。

我正在研究 flex，这似乎行不通，但欢迎提出任何建议。

在任何情况下最好的解决方案是 CSS，但如果这是不可能的，纯 JS 也可以。

span = document.getElementsByTagName("span")[0];
function addelem() {
  span.appendChild(document.createElement('div'));
};

html, body{
  height: 100%;
}

span {
  display: inline-block;
  background-color: blue;
  width: 30px;
  height: 100%;
  vertical-align: top;
}

div {
  background-color: red;
  width: 30px;
  height: 30px;
}

<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>

这是我希望在按下按钮并向下滚动后框架在底部的样子:

编辑

我更改了代码片段，以便按钮将 div 附加到现有子项并导致溢出，正如下面的评论所建议的那样。

Answer 1

flex 容器的初始设置是 align-items: stretch .这意味着 flex 元素将沿着 cross axis 扩展以覆盖容器的整个长度。 .

在带有 flex-direction: row 的容器中，横轴是垂直的，因此元素将扩展到全高。

在您的演示代码中，div(红色)被添加为跨度列(蓝色)的子项。这些 div 被添加到末尾，迫使列增长。

在行向 flex 容器中，没有指定会覆盖 align-items: stretch 的高度，其他列将效仿。

span = document.getElementsByTagName("span")[0];
function addelem() {
  span.appendChild(document.createElement('div'));
};

body {
  display: flex;
  min-height: 100vh;
}

body > span {
  width: 30px;
  margin-right: 5px;
  background-color: blue;
  display: flex;
  flex-direction: column;
}

body > span:first-child span {
  flex: 0 0 100vh;
}

div {
  background-color: red;
  width: 30px;
  height: 30px;
}

button {
  margin-bottom: auto;
}

<span><span></span></span>
<span></span>
<span><button onclick="return addelem()">+</button></span>