Lolechi Lolechi - 5 months ago 17
CSS Question

Making a div fill blank space in parent

There is a master

<div>
which will be separated into two
<div>
s that are
30%
and
70%
of its
width
.

The 30% piece called
outerContainer
has some text in a
<a>
child and another child
<div>
called
container
that needs to take up the remaining space.

My attempt to make the
container
have a
width
and
height
of
100%
, thinking it would fill the
outerContainer
did not work.

The
container
is taking the
width
and
height
of
outerContainer
(it seems like) and not filling up the remaining space like I want it to.



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





See: JSFiddle

Answer

you can solve this easily using flexbox, applying flex-direction:column to .outerContainer, and flex:1 in .container

There will be an image inside the container

As mentioned by @pangloss the min-height:0 in .container fixes the issue.

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