如何使含max-height文本框的容器始终可见，文本框可内部滚动？

你的问题核心是容器内部的高度分配逻辑出了问题——原来的百分比高度在输入内容增多时会打破容器的高度限制，导致工具栏被挤出视野。改用CSS Flexbox可以完美解决这个需求，既能让整个容器始终保持可见，又能让输入框实现内部滚动，具体调整如下：

修改后的CSS代码 #

#container {
  position: absolute; /* 支持将容器放在屏幕任意高度，可按需换成relative/fixed */
  max-height: 75vh; /* 限制容器最大高度为视口75%，避免超出屏幕 */
  width: 100%; /* 可根据实际需求调整宽度 */
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  border: 1px solid #ccc; /* 可选，方便直观看到容器范围 */
}

#inputBox {
  flex: 1; /* 自动占据容器除工具栏外的所有剩余空间 */
  overflow-y: auto; /* 内容超出时触发内部滚动 */
  padding: 8px; /* 可选，优化文本显示体验 */
}

#toolbar {
  flex-shrink: 0; /* 禁止工具栏被压缩，始终保持设定高度 */
  height: 20%; /* 保留你原本的高度设置，也可换成固定高度如40px */
  background: #f5f5f5; /* 可选，区分工具栏区域 */
  padding: 8px; /* 可选，优化工具栏内容显示 */
}

对应HTML（结构无需改动） #

<div id="container">
  <div role="textbox" id="inputBox"></div>
  <div role="toolbar" id="toolbar">工具栏内容</div>
</div>

关键调整说明 #

• 容器启用Flex布局：display: flex + flex-direction: column让子元素垂直自动分配空间，彻底解决百分比高度的适配bug。
• 输入框设flex:1：这会让输入框自动填充容器中除工具栏外的所有可用空间，内容增多时只会触发自身滚动条，不会撑大整个容器。
• 工具栏设flex-shrink:0：确保工具栏不会被输入框挤压，始终保持你设定的高度，不会被隐藏。
• 容器层面限制max-height：把原来输入框的最大高度限制移到容器上，确保整个容器的高度不会超过视口75%，始终处于屏幕可见范围内。

另外，容器的position属性可按需调整：如果需要拖动容器到任意位置，用absolute或fixed；如果容器在文档流中，用relative即可。

内容的提问来源于stack exchange，提问作者Aparna Jain