Flexbox可以帮助我吗？

Question

我继承了别人的问题。 HTML是所有具有浮动，显示和定位调整的DIV。我无法改变的一件事是HTML DIV的结构化。我也不想添加任何新的JavaScript库。但我可以将我需要的所有CSS添加到现有的DIV中。

目前有3个DIV嵌入：

＆＃13;

＆＃13;

<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
    <DIV> 2 </DIV>
    <DIV> 3 </DIV>
</DIV>

＆＃13;

＆＃13;

＆＃13;

看看下图。这个问题是随着DIV1的增长，DIV3会被击倒。我希望DIV3从上到下完全合理（好像是STRETCH）。

没有深入了解当前代码如何结合DISPLAYS，FLOATS和POSITIONING - 我想我需要擦除所有CSS并替换为一些FLEXBOX。但我似乎无法正确组合FLEX属性以使DIV3表现为伸展（而不是被撞倒）。

幸运的是，这只适用于桌面版Chrome浏览器（无移动设备或其他浏览器）。

Answer 1

你去了div 3的宽度已知且固定值： https://codepen.io/AugustinF/pen/qYBpmR

.wrapper {
  position: relative;
  border: 2px solid black;
}
#firstrow {
  height: 100px;
  margin-right: 200px;
  background: green;

}
#secondrow {
}
#div2 {
  float:left;
  background: blue;
}
#div3 {
  width: 200px;
  position: absolute;
  top:0;
  right:0;
  height: 100%;
  background: red;
}
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

HTML：

<div class="wrapper clearfix">
    <DIV id="firstrow"> 1 </DIV>
    <DIV id="secondrow clearfix">
        <DIV id="div2"> 2 </DIV>
        <DIV id="div3"> 3 </DIV>
    </DIV>
</div>

使用@Pete解决方案，您可以使用javascript修改HTML结构，方法是将此代码放在body标记的末尾：

<script>
  document.getElementById('firstrow').appendChild(
    document.getElementById('div2')
  );
</script>