Auto set height of parent with two children, omitting height for parent and one of child divs

Question

I'm bending my head on the following issue.

Let's say I have a structure as follows

<div class="full_row">
  <div class="content_left"></div>
  <div class="content_right">
    <div class="inner_row"></div>
    <div class="inner_row"></div>
  </div>
</div>

With the following CSS:

.full_row {
  background: lightgrey;
  border: 1px solid grey;
  width: 400px;
}

.content_left {
  height: 100%;
  float: left;
}

.content_right {
  float: left;
  border: 2px solid grey;
}

.inner_row {
  height: 25px;
  width: 250px;
  border: 1px solid white;
}

How do I achieve the following:

• content_right knows that it should be 50px tall (as it has two children, each 25px tall)
• full_row knows that it should be 50px tall (as its largest child is 50px tall)
• content_left will be 50px tall, 100% of the height of full_row.
• bonus question: can I make content_left figure out that it should be 150px wide, to fill the gap that content_right (400px-250px) left for him?

I want to do this with plain CSS, as I want to make things shiny & animate them. I have a codepen that contains the desired state (and the example above) here .

I honestly tried to find it on Stackoverflow & Google, found some examples of when the parent height is known. But haven't found an example in which a child determines the height of its parent, which in turn determines the height of the other child; I'm barely getting started with html/css.

Help is greatly appreciated.

Answer 1

Time to start learning Flexbox! Check out this example.

 .full_row { display: flex; } .full_row > div { width: 50%; padding: 10px; } .content_left{ background: red; } .content_right{ background: blue; } 

 <div class="full_row"> <div class="content_left">aaaa</div> <div class="content_right"> <div class="inner_row">bbbb</div> <div class="inner_row">cccc</div> </div> </div> 

Answer 2

Flexbox is probably a good choice for something like this. I kept your custom sizing of columns in mind:

 .full_row { background: lightgrey; border: 1px solid grey; width: 400px; display: flex; flex-direction: row; flex-wrap: nowrap; } .content_left { height: 100%; flex-grow: 1; } .content_right { border: 2px solid grey; flex-direction: column; } .inner_row { height: 25px; width: 250px; border: 1px solid white; } 

 <div class="full_row"> <div class="content_left">left</div> <div class="content_right"> <div class="inner_row"></div> <div class="inner_row"></div> </div> </div> 

Answer 3

I guess there are couple ways to do this, but not knowing exactly what's your definite goald is, here is one solution:

.full_row {
    display: table;
    overflow: hidden;
    background: lightgrey;
    border: 1px solid grey;
    width: 400px;
}

.content_left {
    display: table-cell;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.content_right {
    display: table-cell;
    border: 2px solid grey;
}

.inner_row {
    height: 25px;
    width: 250px;
    border: 1px solid white;
}

Important: Remember to take float: left away from contents. If you want to be sure, and I still don't know the outcome you want, but adding float: right to your right content doesn't harm.