如何让input占满div宽度且不影响前置span的布局？

我有一个包含span和input的表单，代码如下：

<form onSubmit={e => handleSubmit(e)}>
    <Box className='form_box'>
        <span>
            guest@website.com:: {'~ >>'}
        </span>

        <input value={user_input} onChange={e => handleChange(e.target.value)} />
    </Box>
</form>

CSS样式：

.form_box{
    background-color: beige;
    color: white;
    display: flex;
    align-items: center;

    input{
        border: none;
        outline: none;
        color: black;
        background-color: white;
    }

}

我希望input元素能占满其父容器form_box的全部宽度，但设置width:100%后，前置的span元素会出现换行，仿佛文本超出容器宽度。

示例：
原始布局：

guest@website: ____ <- original

设置width:100%后的异常布局：

guest@ __________________ <- what happens if i try to set width to 100%

website

寻求可行的CSS解决方案，非常感谢！

问题根源是：给input设置width:100%后，它会直接占据form_box的100%宽度，加上span自身的宽度，总宽度超出容器，导致flex布局下span被挤压换行。

推荐用flex布局的flex-grow属性实现input占满剩余空间，无需固定宽度：

修改后的CSS：

.form_box{
    background-color: beige;
    color: white;
    display: flex;
    align-items: center;

    input{
        border: none;
        outline: none;
        color: black;
        background-color: white;
        flex-grow: 1; /* 让input占据容器内所有剩余空间 */
        min-width: 0; /* 可选：防止input内容过长时撑破容器 */
    }

    span{
        white-space: nowrap; /* 可选：强制span文本保持单行，避免挤压换行 */
        margin-right: 8px; /* 可选：给span和input加间距，优化布局 */
    }
}

原理说明 #

• flex-grow:1：让input在flex容器中自动占据所有未被其他元素占用的剩余空间，span会保留自身所需宽度，不会被挤压。
• white-space: nowrap：确保span内的文本始终在一行显示，不会因空间不足自动换行。
• min-width:0：当input内容过长时，允许input宽度收缩，避免撑破父容器，维持布局稳定。

如果一定要用width属性，可尝试calc（不推荐，因为span宽度可能动态变化）：

input{
    width: calc(100% - 150px); /* 150px为span的大致宽度，需根据实际调整 */
}

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