Div容器新增内部元素时无法自动扩展的问题求助

问题根源 #

你的代码里有两个核心问题导致容器无法自动扩展：

1. .signup-box 硬编码了固定高度 height: 300px，直接限制了容器的最大高度，新增内容只会溢出而不会让容器长高。
2. .user-input 使用了 position: absolute，这个属性会让元素脱离文档流，父容器无法感知它的高度变化，自然不会跟着扩展。

修复步骤 #

1. 移除固定高度，改用最小高度（可选）
   把 .signup-box 的 height: 300px 删掉，或者换成 min-height: 300px（保留基础高度，内容多了自动扩展）。同时调整绝对定位的居中方式，避免固定高度失效后布局偏移：

   .signup-box {
       background-color: #0b0b18;
       padding: 60px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%); /* 用transform实现绝对定位元素的居中 */
       border-radius: 20px;
       width: 200px;
       /* height: 300px; 删掉这行，或者替换为下面的min-height */
       min-height: 300px;
   }
   

2. 取消子元素的绝对定位，让它回到文档流
   删掉 .user-input 里的绝对定位相关属性，让元素正常占据文档流空间，父容器就能根据它的高度自动扩展：

   .user-input {
       margin-bottom: 10px;
       /* 移除以下绝对定位属性 */
       /* position: absolute; */
       /* top:20px; */
       /* bottom: 0; */
       /* left: 0; */
       /* right: 0; */
   }
   

3. 调整元素间距（可选）
   去掉绝对定位后，可通过 margin 调整元素间的距离，保证布局美观：

   .signuptext {
       color: white;
       font-size: 30px !important;
       margin-bottom: 20px; /* 增加底部间距，拉开和输入框的距离 */
   }
   

修复后效果 #

修改完成后，当你在 .signup-box 内添加错误提示内容时，容器会根据内部内容的高度自动扩展，同时保持居中布局。

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