Scrollable div inside container without known height - html

Question

I'm trying to scroll items within a container without known height. I have div itemsHolder which fills up the rest of wrapper container. wrapper container can have any height but contains header container which has fixed height. So I don't know the height of itemsHolder and I need div items to be scrollable. Here's the code I tried but was unsuccessful.
To sum up. There's wrapper container containing header and itemsHolder. wrapper has variable height, header has fixed height and itemsHolder fills the rest of wrapper (wrapper.height - header.height = itemsHolder.height). I need div items to be scrollable within itemsHolder without using JS.
Thanks.
<div class="wrapper">
<div class="header">
title
</div>
<div class="itemsHolder">
<div class="items">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
CSS:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
overflow: scroll;
}
.item {
width: 100px;
height: 80px;
float: left;
}
http://jsfiddle.net/B2XUL/
Update: I don't know the size of wrapper, it may be different each time and therefore I don't know the height of itemsHolder so I can't set it fixed.

Answer 1

Do the following:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
}
.itemsHolder {
height: 100%;
overflow: auto;
overflow-x:hidden;
background: #ccc;
}
Demo

Answer 2

Set the height of itemsHolder and it will add the scroll if necessary
.itemsHolder {
overflow: scroll;
height: 150px;
}
http://jsfiddle.net/B2XUL/4/
EDIT: I'm very sorry I can't provide an explanation as to why, but adding bottom padding to .wrapper and setting the height of .itemsHolder seems to work. You may have to reduce size of wrapper by 35px when it is set.
Any explanation for this or even a better fix would be welcomed.
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
padding-bottom: 35px;
}
.itemsHolder {
overflow: scroll;
height: 100%;
}
(also .items seems redundant?)
see updated fiddle

Answer 3

Using calc() CSS property, you can achieve wrapper.height - header.height = itemsHolder.height
.itemsHolder {
overflow: auto;
height:calc(100% - 50px);
}

Answer 4

Add overflow auto:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 20%;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
height: 80%;
overflow: auto;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}
Add overflow-x: hidden if you only want vertical scroll.
Updated Fiddle

Answer 5

js fiddle demo
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}