如何避免:after元素超出div容器（不使用overflow:hidden）

解决办法 #

核心思路是利用flex布局的空间分配逻辑，让模拟输入区优先收缩、占满剩余空间，发送按钮固定自身宽度，确保不会溢出容器。

原代码的问题在于用padding: 26px 85% 0 0硬撑输入区宽度，这种固定百分比的方式没法适应容器宽度变化，而且flex布局里float根本不起作用。直接改CSS就行：

修改后的完整CSS

.typebar {
    min-width: 0;
    max-width: 620px;
    max-height: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid red;
    display: flex;
    gap: 1%; /* 替换原来的margin-left，flex布局用gap更合适 */
    align-items: center; /* 让输入区和按钮垂直居中对齐 */
}

.typebar:before {
    content: '';
    border: 5px solid #566573;
    background: #eeeeee;
    cursor: text;
    /* 关键配置：让这个元素自动填充剩余空间，且优先收缩 */
    flex: 1 1 auto;
    /* 用min-height保证高度，替代原来靠padding撑高度的写法 */
    min-height: calc(40px - 10px); /* 容器高度40px减去边框的10px */
}

.typebar:after {
    content: 'PESTER';
    font-weight: 600;
    border: 5px solid #566573;
    padding: 5px;
    color: #eeeeee;
    background: #2C3E50;
    cursor: pointer;
    /* 让按钮保持自身宽度，不放大也不收缩 */
    flex: 0 0 auto;
    white-space: nowrap; /* 防止按钮文字在极端窄屏换行 */
}

调整要点

1. 删掉:before和:after里的position: relative和float，flex布局不需要这些冗余属性。
2. 用gap替代:after的margin-left，是flex布局里控制元素间距的标准写法。
3. 给:before设置flex:1 1 auto：第一个1表示可以占满剩余空间，第二个1表示空间不足时优先收缩，完美适配窄屏。
4. 用min-height替代原:before的垂直padding，避免padding导致元素高度超出容器的max-height。
5. 给:after设置flex:0 0 auto，确保按钮始终保持自身宽度，不会被挤压或拉伸，white-space:nowrap则保证按钮文字不会被拆成两行。

改完之后不管屏幕多窄，发送按钮都会稳稳待在容器里，模拟输入区会自动收缩适配剩余空间。

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