Изготовление ДИВ заполнить пустое пространство родителя

Question

Существует мастер <div>, который будет разделен на две <div> с, которые 30% и 70% его width.

30% часть называется outerContainer имеет некоторый текст в <a> ребенка и другой ребенок <div> под названием container, который должен занять оставшееся пространство.

Моя попытка сделать container есть width и height из 100%, думая, что бы заполнить outerContainer не работает.

container принимает width и height из outerContainer (кажется) и не заполняя оставшееся пространство, как я хочу его.

.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

вы можете решить эту проблему легко с помощью flexbox, применяя flex-direction:column к .outerContainer и flex:1 в .container

Там будет изображение внутри контейнер

Как упоминалось @pangloss, min-height:0 в .container исправляет проблему.

*, 
 
*::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>