CODEWITHSUNDEEP
cssoverflowpositioning
Flavien
Flavien

Reputation: 95

CSS Overflow: relative height with bottom absolute positionning

Yes, another annoying overflow question on css...

Here is my case:

HTML

<div id="parent">
  <div id="child1">
    Some short content that may take a line or two.
  </div>
  <div id="child2">
    Some short to very long content that may overflow parent div...
  </div>
<div>

CSS

#parent {
  position: absolute;
  height: 100%;
  width: 100px;
}

#child1 {
}
#child2 {
  overflow: auto;
}

As you can see I want child2 to overflow the parent div when needed. But as I don't know the exact height of child2 (because child1 may vary a bit) I'm not able to do some absolute positionning as I'm used to with bottom: 0px and top: ???px.

Some JSFiddle to play with : https://jsfiddle.net/6r3ojecL/1/

In the worst case I will use some ugly JS code snippet, but I'll be happy if I could to master css once again. :)

Thanks!

Upvotes: 2

Views: 725

Answers (2)

Mr. Hugo
Mr. Hugo

Reputation: 12592

Set the overflow on the parent and not on the child (updated).

CSS

#parent {
 position: absolute;
 height: 100%; 
 width: 100px; 
 overflow: auto; 
} 
#child1 { } 
#child2 { }

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

A solution using display: flex. Check the updated fiddle

#parent {
  display: flex;
  position: absolute;
  height: 50%;
  width: 100px;
  border: 1px solid red;
  background-color: red;
  flex-direction: column;
}
#child1 {
  height: 50px;
  background-color: yellow;
}
#child2 {
  flex: 1;
  background-color: green;
  overflow: auto;
}
<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content
  </div>
</div>

Upvotes: 4

Related Questions