Flex in grand (grand) children of row layout

Question

Я хочу использовать гибкую «систему», чтобы получить что-то, что выглядит , как на изображении ниже, но у меня есть некоторые сгенерированные директивы между моим разметкой div и гибкими:

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

что дает мне то, что посмотреть, как первый раздел на этом CodePen. Наверное, я мог бы JQuery стиль из этих div, но нет ли более чистого пути?

Answer 1

Вам необходимо использовать атрибут flex, чтобы он содержал всю доступную ширину.

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

работает пример. http://codepen.io/next1/pen/xVyPGw