Input元素flex:1属性不生效问题求助（Svelte环境）

问题出在input元素的默认样式上——作为flex容器的子项，input的min-width默认值是auto，这会让它坚守自身的最小内容宽度，不会被flex:1的规则压缩，最终导致溢出容器。

解决方法很简单，给input加上min-width: 0，或者直接把flex属性写完整：

<main>
    <section>
        <span>Name:</span>
        <input type="text" bind:value={...} />
        <span>Age:</span>
        <input type="text" bind:value={...} />
    </section>
</main>

<style>
    main {
        width: 50vw;
        padding: 1rem;
    }

    section {
        display: flex;
        gap: 1rem;
    }

    input {
        flex: 1;
        min-width: 0; /* 关键修复 */
    }
</style>

或者也可以把flex属性改为flex: 1 1 0%，效果是一样的——明确让flex-basis为0%，让input完全基于剩余空间分配宽度，不再受自身最小宽度限制。

这样修改后，输入框就会乖乖适配容器宽度，不会再像防洪堤扛不住飓风那样溢出了。

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