How can I create two children to fill a parent's height?

Question

Given an outermost "containing" div of arbitrary dimensions, I am looking for markup and css that will place two divs within it, and display them left to right, as follows. The first div, on the left, should have a fixed width of 200 pixels. It should take up 100% of the height of its parent. The second div, on the right, should take up the remaining width of the parent and also 100% of its height.

So, given the following HTML for a parent container along with the two children:

<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

And given this CSS for the parent:

.a {
  height: 300px;
  width: 600px;
  background-color: gray;
}

And given this incomplete CSS for the children:

.b {
  background-color: red; 
}
.c {
 background-color: green;
}

How can I complete the CSS for the children, in a way that does not depend on the exact height and width of the parent?

(It would also be permissible to add another element ".d" as the parent of the two children, for example as a flex container, giving the following HTML:

<div class="a">
  <div class="d">
    <div class="b">

    </div>
    <div class="c">

    </div>
  </div>
</div>

The point is that I cannot modify the outermost element, but I can accomplish my goals with any combination of elements and css beneath it.

)

Take a look at the flex properties/layout , give it a try ;) If you go for flex, a possible similar question https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486#25098486 — G-Cyrillus, Jul 16 '18 at 20:06
Is this what you're after? https://codepen.io/danield770/pen/ZjWypZ?editors=1100 - just make `a` a flex container - the items will get the height of the container by default — Danield, Jul 16 '18 at 20:10

score 2 · Accepted Answer · answered Jul 16 '18 at 20:23

display: flex was designed for this type of set up.

My personal favourite post, when I need to brush up on the settings, is CSS-Tricks': "A complete guide to Flexbox"

.a {
  display: flex; /* turn element into a flex container, and all its children into flex elements */
  flex-direction: row; /* render the flexbox horizontally */
  height: 300px;
  width: 600px;
  background-color: gray;
}

.b {
  width: 200px; /* Element will be exactly 200px wide */
  background-color: red;
}

.c {
  flex-grow: 1; /* This (flex) element will take all available space */
  background-color: green;
}

<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

score 0 · Answer 2 · answered Jul 16 '18 at 20:15

This is how I do it: with relative positioning.

.b {
      background-color: red; 
     position: relative;
     left: 0px;
     top: 0px;
     width: 100px;
     height: 300px;


}
.c {
     background-color: green; 
     position: relative;
     left: 100px;
     top: -300px;
     height: 300px;

}

Basically, relative positioning moves the boxes relative to where they would have been under normal positioning.

How can I create two children to fill a parent's height?

2 Answers2