Как сделать внутренний div размера Flexbox родителя

Я использую flexbox для размещения веб-приложения. Он работает, за исключением основной области содержимого. «Роутер-вид» - ожидаемая полная высота. Но div внутри этого НЕ полная высота просмотра маршрутизатора?Как сделать внутренний div размера Flexbox родителя

Как сделать div с идентификатором полной высоты «полная высота»?

Я попытался установить высоту на 100%, но это не влияет.

HTML

<div class="full-screen flex-container-column"> 
    <div class="header no-flex"> 
     Fixed Header 
    </div> 

    <!--The router-view IS full height--> 
    <router-view class="flexible"> 
     <div id="make-full-height"> 
      How do I make this div full height? 
     </div> 
    </router-view> 
    <div class="footer no-flex"> 
     Fixed Footer 
    </div> 
</div>

CSS

.full-screen { 
    height: 100vh; 
} 

.flex-container-column { 
    display: flex; 
    flex-direction: column; 
} 

.no-flex { 
    flex: 0 0 auto; 
    overflow: auto; 
} 
.footer { 
    height: 30px; 
    background: #555; 
    color: white; 
} 

.header{ 
    height: 50px; 
    background: #555; 
    color: white; 
} 


.flex-container { 
    flex: 1 1 auto; 
    display: flex; 
    overflow: hidden; 
} 
.left, .right { 
    width: 200px; 
    background: #eee; 
} 
.flexible { 
    flex: 1 1 auto; 
}

источник

2016-11-21 Greg Gum

Я не вижу, где вы настраиваете высоту дел до 100%. Если вы можете опубликовать plunkr или что-то, что мы можем вам помочь, но в целом я считаю, что проверка иерархии с помощью chrome обычно показывает мне, где я чего-то не хватает. –

Принятый здесь ответ может помочь: http://stackoverflow.com/q/33636796/3597276 –

Установите <router-view иметь display: flex и установить flex:1 для #make-full-height. Таким образом, # make-full-height заполнит его контейнер, так как других детей нет.

.full-screen { 
 
    height: 100vh; 
 
} 
 

 
.flex-container-column { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.no-flex { 
 
    flex: 0 0 auto; 
 
    overflow: auto; 
 
} 
 
.footer { 
 
    height: 30px; 
 
    background: #555; 
 
    color: white; 
 
} 
 

 
.header{ 
 
    height: 50px; 
 
    background: #555; 
 
    color: white; 
 
} 
 

 

 
.flex-container { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    overflow: hidden; 
 
} 
 
.left, .right { 
 
    width: 200px; 
 
    background: #eee; 
 
} 
 
.flexible { 
 
    flex: 1 1 auto; 
 
    background-color: #88F; 
 
    display: flex; 
 
} 
 

 
#make-full-height { 
 
    flex : 1; 
 
    background-color: #8F8; 
 
}

<div class="full-screen flex-container-column"> 
 
    <div class="header no-flex"> 
 
     Fixed Header 
 
    </div> 
 

 
    <!--The router-view IS full height--> 
 
    <router-view class="flexible"> 
 
     <div id="make-full-height"> 
 
      How do I make this div full height? 
 
     </div> 
 
    </router-view> 
 
    <div class="footer no-flex"> 
 
     Fixed Footer 
 
    </div> 
 
</div>

источник

2016-11-21 02:40:06 Mobius

Вот и все. Спасибо. –

Как сделать внутренний div размера Flexbox родителя

ответ

Смежные вопросы