CODEWITHSUNDEEP
htmlcssflexbox
Paran0a
Paran0a

Reputation: 3457

Position element at the bottom with prior element filling up height

First div should fill up remaining height that's left while second div should be positioned at the bottom with it's initial height.

DEMO:

.container {
  width: 240px;
  height: 400px;
  background: #E0E0E0;
  display: flex;
  flex-direction: column;
}

.first {
  border :1px solid black;
  padding: 1em;
  box-sizing: border-box;
}

.second {
  border: 1px solid blue;
  padding: 1em;
  box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>

</div>

Upvotes: 1

Views: 31

Answers (2)

Chris
Chris

Reputation: 59531

The answer to this would vary from markup to markup, but in your case you can just add this to your first element:

height: 100%;

This works because of your flex display property of the container. A different property on the container would likely require another solution.

Demo

Full code 

.container {
  width: 240px;
  height: 400px;
  background: #E0E0E0;
  display: flex;
  flex-direction: column;
}

.first {
  height: 100%;
  border :1px solid black;
  padding: 1em;
  box-sizing: border-box;
}

.second {
  border: 1px solid blue;
  padding: 1em;
  box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>

Upvotes: 1

dekts
dekts

Reputation: 830

You need to make height auto to container class so depend on length of string your height is increase. 

<style>
.container {
  width: 240px;
  height: auto;
  background: #E0E0E0;
  display: flex;
  flex-direction: column;
}

.first {
  border :1px solid black;
  padding: 1em;
  box-sizing: border-box;
}

.second {
  border: 1px solid blue;
  padding: 1em;
  box-sizing: border-box;
}
</style>
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>

</div>

Upvotes: 0

Related Questions