模态框文本溢出容器背景未延伸问题排查咨询

问题原因 #

1. 父容器.transaction-modal设置了align-items: stretch，导致子元素.transaction-forms被强制拉伸至与模态框容器等高，而非根据内部内容自适应高度。
2. .transaction-forms未配置垂直溢出处理，当内容过多时，文本直接超出容器范围，容器背景仅覆盖拉伸后的固定高度，无法随内容延伸。

修正后的代码 #

HTML结构（无需修改） #

<div className='transaction-modal'>
   <div className='transaction-forms'>
      Content of the box modal here
   </div>
</div>

修正后的CSS #

.transaction-modal {
    background-color: rgba(61, 61, 61, 0.48);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;

    display: flex;
    justify-content: center;
    /* 取消强制拉伸，让子元素按内容高度自适应 */
    align-items: flex-start;

    overflow-y: scroll;
    /* 添加上下内边距，避免内容贴紧屏幕边缘 */
    padding: 20px 0;
}

.transaction-forms {
    background-color: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 611px;
    /* 设置最大高度，超出时内部滚动 */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    /* 让子元素在小屏幕下自适应宽度 */
    width: 100%;
}

关键调整说明 #

• 将align-items: stretch改为flex-start：解除子元素的垂直强制拉伸，让.transaction-forms高度由内部内容决定，背景会自动随内容延伸。
• 给.transaction-forms添加max-height和overflow-y: auto：限制子元素最大高度为视口高度减去上下内边距，内容过多时子元素内部出现滚动条，避免整体布局混乱。
• 添加width: 100%：确保子元素在小屏幕下自适应宽度，保持模态框的可用性。

内容的提问来源于stack exchange，提问作者Rodrigo Dorneles