Can Flexbox help me?

Question

I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.

Currently 3 DIVs are embedded as:

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

Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).

Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).

Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).

Answer 1

There you go IF width of div 3 is known and fixed value: 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>

Using @Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:

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