css - 当外部具有最大高度时强制滚动内部 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

更新:根据您更新的问题，您可以使用 display:flex 而不是我最初建议并保留的 max-height 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>