Blazor中实现Input/Textarea自适应内容宽度的HTML/CSS方案

核心方案（Input适配） #

通过调整Flex容器和Input的CSS属性，让Input贴合内容宽度，同时保留Blazor的@bind、@onfocusout等表单事件支持，最后一个Flex项自动占满剩余空间。

自定义CSS样式

/* 自适应宽度的Input样式 */
.auto-width-input {
    padding: 0.375rem 0.75rem; /* 匹配Bootstrap默认内边距 */
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    width: auto; /* 宽度由内容决定 */
    min-width: 60px; /* 内容为空时的最小宽度 */
    max-width: 400px; /* 限制最大宽度，避免内容过长撑爆布局 */
    flex-shrink: 1; /* 允许Input在空间不足时收缩 */
    flex-grow: 0; /* 禁止Input自动扩展抢占空间 */
}

/* 父容器Flex布局调整 */
.flex-input-container {
    display: inline-flex;
    align-items: center;
    width: 100%; /* 占满父元素宽度，确保最后一项flex-grow生效 */
    gap: 0.5rem; /* 增加项间距，优化排版 */
}

修改后的Blazor代码

<div class="flex-input-container">
    <input class="auto-width-input" @bind=Player.Name @onfocusout=StoreChangesToDB>
    <div> - @Player.Profession |</div>
    <div class="littleText flex-grow-1">@Player.Motivation</div>
</div>

Textarea 适配方案 #

如果需要Textarea也实现类似效果，可复用父容器样式，添加Textarea专属CSS：

Textarea自定义样式

.auto-width-textarea {
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    width: auto;
    min-width: 100px;
    max-width: 400px;
    flex-shrink: 1;
    flex-grow: 0;
    resize: none; /* 禁止手动调整大小 */
    overflow: hidden; /* 隐藏滚动条 */
    min-height: 60px; /* 最小高度 */
    height: fit-content; /* 高度随内容自适应（部分浏览器需兼容） */
}

Blazor Textarea代码示例

<div class="flex-input-container">
    <textarea class="auto-width-textarea" @bind=Player.Description @onfocusout=StoreChangesToDB></textarea>
    <div> - @Player.Profession |</div>
    <div class="littleText flex-grow-1">@Player.Motivation</div>
</div>

关键说明 #

• width: auto 让输入控件宽度由内容决定，配合flex-grow:0确保不会抢占最后一项的空间；
• min-width/max-width 控制控件的宽度范围，避免极端情况影响布局；
• 父容器使用inline-flex + width:100%，既保证容器能根据内容调整，又让最后一项通过flex-grow:1占满剩余宽度。

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