当外部具有最大高度时，强制滚动内部div？

Question

以下是设置：

#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>

你可以看到红色框从底部开始。我想要一个滚动条出现，底部应该可以看到5像素的蓝色填充。

我该怎么做？

请注意，我不知道红色框的确切高度。如果内容较少，则应该没有滚动条，总高度将小于250px。

Answer 1

好的，我们有一个div #out，其最大高度可以获得滚动条。 #in div将添加蓝色边框，#scroll div包含将在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 2

更新：根据您更新的问题，您可以使用display:flex代替我最初建议的max-height，并保留overflow:auto。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

#in {
  background-color: red;
  overflow: scroll;
  max-height: 245px;
}