You can remove the height
, set the max-height
to the desired value (I recon it's 10em
, right?) and set overflow-y
to auto
:
.toolbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 1em;
background-color: lightgrey;
border-top: 1px solid grey;
max-height:10em;
overflow:auto;
}
EDIT
By your own suggestion, if you apply absolute position to the right div, it'll still respect the dimensions of it's parent. Here's how the code ended
.right {
right:1em;
bottom:1em;
top:1em;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap; /* Is this really needed? */
padding: 1em;
background-color: #fff;
position: absolute;
}
PS: The white-space: nowrap;
is preventing the li
phrase to collapse, ignoring the div width.