My goal is to achieve a layout similar to the image below using the flex "system", but I am facing a challenge with some generated directives that are inserted between my layout div and the flex containers:
https://i.sstatic.net/nq4Ve.png
<div id="i-can-control-this-div" layout="row" layout-wrap>
<div id="uncontrolled-div-generated-by-vendor-directive">
<div id="another-generated-div">
<div id="maybe-the-last-one">
<div id="uncontrollable-div-arround-each-flex">
<div flex="66">[flex=66]</div>
</div>
<div id="uncontrollable-div-arround-each-flex">
<div flex="33">
<div style="height:100px">[flex=33]</div>
</div>
</div>
<div id="uncontrollable-div-arround-each-flex">
<div flex="66">[flex=66]</div>
</div>
<div id="uncontrollable-div-arround-each-flex">
<div flex="33">[flex=33]</div>
</div>
<div id="uncontrollable-div-arround-each-flex">
<div flex="33">[flex=33]</div>
</div>
<div id="uncontrollable-div-arround-each-flex">
<div flex="33">[flex=33]</div>
</div>
<div id="uncontrollable-div-arround-each-flex">
<div flex="33">[flex=33]</div>
</div>
</div>
</div>
</div>
</div>
The layout created looks similar to the first section in this CodePen. One potential solution could be to use JQuery to manipulate the styles of these divs, but I am curious if there is a cleaner approach available?