Flexbox высота 100% в течение не-Flexbox контейнера

Question

Рассмотрим следующее перо: http://codepen.io/anon/pen/xVgevE

Наш гибкий разметки, <right-component> внутри куска макета третьей стороны, а именно в DIV с неограниченной высоты.

Сам div находится внутри внешней схемы flexbox.

Как сделать внутренний гибкий компонент заполнить доступную высоту без жесткого кодирования или полностью переопределить все стили стороннего компонента, чтобы сделать его гибким?

Answer 1

Вы пытаетесь заполнить пространство справа. Если это так, этот jsFiddle может содержать ответ: https://jsfiddle.net/Dneilsen22/crfz66jx/

У вас есть корень с высотой, равным 100vh, поэтому, создав контейнер, такой как rightComponent, и установив его на ту же высоту, мы можем заполнить контент на 100% пространство.

CSS:

#rightComponent { 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
} 

#right-content { 
    display:flex; 
    flex-direction: column; 
    background: #779; 
    height:100% 
} 

HTML:

<uncontrollable-third-party-component> 
    <div>Third party stuff</div> 
    <div id="rightComponent"> 
     <div id="right-topbar"> 
      Right topbar 
     </div> 
     <div id="right-content"> 
      Right content 
     </div> 
    </div> 
</uncontrollable-third-party-component>