Force scrolling of inner div when outer has max-height? - css

Question

Here's the setup:
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
}
#in {
background-color: red;
overflow: scroll-y;
}
input {
width: 100%;
box-sizing: border-box;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
You can see that the red box runs off the bottom. I want a scrollbar to appear instead, and the 5-pixel blue padding should be visible on the bottom.
How can I do this?
Note that I don't know the exact height of the red box. If there's less content, there should be no scrollbar, and the total height will be less than 250px.

Answer 1

Update: Based on your updated question, you can use display:flex instead of the max-height that I initially suggested and keep the overflow:auto.
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
#in {
background-color: red;
max-height: 240px;
overflow: auto;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>

Answer 2

Ok so we have a div #out with a max-height to get scrollbars. The #in div will add the blue border and the #scroll div contains the content that will scroll on overflow-y
#out {
width: 100px;
max-height: 250px;
position:relative;
background:blue;
padding:5px;
}
#in {
background-color: red;
height:240px
}
#scroll{
height:100%;
overflow-y: scroll;
overflow-x: hidden;
}
<div id="out">
<div id="in">
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
</div>

Answer 3

#out {
width: 100px;
max-height: 250px;
overflow: scroll;
background-color: blue;
padding: 5px;
}
#in {
background-color: red;
overflow: scroll;
max-height: 245px;
}