Force an element to be 100% height when the parent is shimmed taller by another child

Question

Here I have a parent div containing two children. Child 1 is set to 100% height, but it does not display at the actual height of parent, because child 2 is forcing the parent div taller.

<div style="height: 50px; width:106px">
  <div style="border: 1px solid red; display: flex">
    &nbsp;
    <span style="border: 1px solid blue; height: 100%;">Child 1</span>
    &nbsp;
    <span style="border: 1px solid green; height: 100px;">Child 2</span>
    &nbsp;
  </div>
</div>

How can I get child 1 to match the actual height of the parent div in this scenario? I want to do this with pure HTML/CSS.

Answer 1

your issue is because your child1 is inherit from parent. if you set it 100%, means the size of your child 1 will be 50px. to make it auto remove your child 1 height: 100%; below is a sample.

<div style="height: 50px; width:106px">
  <div style="border: 1px solid red; display: flex">
    &nbsp;
    <span style="border: 1px solid blue;">Child 1</span>
    &nbsp;
    <span style="border: 1px solid green; height: 100px;">Child 2</span>
    &nbsp;
  </div>
</div>

Answer 2

Another answer to this question is correct in terms of the solution, but the explanation is incorrect.

You have a flex container.

The container has two span children: span1 and span2.

span1 is set to height: 100%

span2 is set to height: 100px.

Because span1 is set to height: 100% and the flex container has no defined height, this element computes to height: auto (the height of the content).

Here is a more complete explanation of how this works:

• Working with the CSS height property and percentage values

However, a default setting on a flex container is align-items: stretch. This means that flex items will expand to cover the length of the container's cross axis, which would be the height in this case.

But this default setting is overridden by the height property on flex items.

Therefore, remove height: 100% so align-items: stretch can work.

Now you have two equal height columns.

<div style="height: 50px;">
  <div style="border: 1px solid red; display: inline-flex; padding: 5px;">
    <span style="border: 1px solid blue;">Child 1</span>
    <span style="border: 1px solid green; height: 100px; margin-left: 5px;">Child 2</span>
  </div>
</div>