親にdiv塗りつぶし空白を作成する

Question

<div>は、30%の2つに分割され、widthの70%に分割されます。

outerContainerと呼ばれる30％片が<a>子でいくつかのテキストと、残りのスペースを取る必要があるcontainerと呼ばれる別の子<div>を持っています。 containerを作るために

私の試みは、それがouterContainerは動作しませんでし埋めるだろうと考え、100%のwidthとheightを持っています。

containerはouterContainerのwidthとheightを取って（それはのように思える）と私はそれがしたいように残りのスペースを埋めていません。

.master { 
 
    width: 100%; 
 
    height: 300px; 
 
    background: black; 
 
} 
 
.outerContainer { 
 
    width: 50%; 
 
    height: 100%; 
 
    border: 2px solid cyan; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 2px solid red; 
 
} 
 
.text { 
 
    margin: 0; 
 
    color: white; 
 
}

<div class="master"> 
 
    <div class="outerContainer"> 
 
    <div class="text"><a href="#">Some </a>Text</div> 
 
    <div class="container"></div> 
 
    </div> 
 
</div>

参照：JSFiddleは

Answer 1

あなたは、これは簡単に

.containerに.outerContainerからflex-direction:column、およびflex:1を適用し、flexboxを使用して内部の画像があります解決することができますコンテナ

min-height:0.containerの@panglossで述べたように、この問題は修正されています。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
.master { 
 
    width: 100%; 
 
    height: 300px; 
 
    background: black; 
 
    display: flex 
 
} 
 
.outerContainer { 
 
    width: 50%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.container { 
 
    min-height:0; 
 
    width: 100%; 
 
    flex: 1; 
 
    background: red; 
 
} 
 
.container img{ 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
} 
 
.text { 
 
    margin: 0; 
 
    color: white; 
 
}

<div class="master"> 
 
    <div class="outerContainer"> 
 
    <div class="text"><a href="#">Some </a>Text</div> 
 
    <div class="container"> 
 
     <img src="http://lorempixel.com/250/400" alt="img" /> 
 
    </div> 
 
    </div> 
 
</div>