当一个元素增加时（相等的高度列）增加所有元素的高度

Question

我希望当身体的大小扩大时，所有100％高度的元素都会扩展。

在示例中，按下按钮将添加红色div - 相邻的两列应拉伸以解决此问题。最后所有列应完全到达底部，一个用蓝色然后是红色，另外两个只用蓝色。

我正在调查flex，但这似乎不会起作用，但任何建议都值得赞赏。

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

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

修改

我更改了代码段，因此该按钮会将div附加到现有子代并导致溢出，根据以下评论提示。

Answer 1

弹性容器的初始设置为align-items: stretch。这意味着flex项目将展开以覆盖cross axis上的容器的整个长度。

在flex-direction: row的容器中，横轴是垂直的，因此项目将展开到最大高度。

在您的演示代码中，div（红色）将作为span列的子项添加（蓝色）。这些div正被添加到最后，迫使列增长。

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

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该使用Flexbox两次，一次在外部容器中，一次在包含附加子元素的容器中。

以下是您修改后的代码：

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

html, body{
  height: 100%;

  /* new */
  display: flex;
}

/* new */
body > span{margin-right: 4px;}

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

  /* new */
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}

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

  /* new */
  flex: 1 0 auto;
}

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