Q:

Flex in grand(grand)children of row layout

I want to use the flex "system" to obtain something that looks
like the image below, but I have some generated directives between my layout div and the flex ones:

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

Which gives me something that look like the first section on this CodePen. I guess I could JQuery the style out of those divs but isn't there a cleaner way ?

A:

You need to use flex attribute so that it will contain all the avaliable width.    
<div id="i-can-control-this-div">
<div id="uncontrolled-div-generated-by-vendor-directive">
  <div id="another-generated-div">
    <div layout="row" flex layout-wrap id="maybe-the-last-one">
      <div flex="66" id="uncontrollable-div-arround-each-fl">
        <div>[flex=66]</div>
      </div>
      <div id="uncontrollable-div-arround-each-flex" flex="33">
        <div>
          <div style="height:100px">[flex=33]</div>
        </div>
      </div>
      <div flex="33" id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
       <div flex="66" id="uncontrollable-div-arround-each-flex">
        <div>[flex=66]</div>
      </div>
      <div flex="33" id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
      <div flex="33" id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
      <div flex="33"id="uncontrollable-div-arround-each-flex">
        <div >[flex=33]</div>
      </div>
    </div>
  </div>
</div>

working example.
 http://codepen.io/next1/pen/xVyPGw

