CODEWITHSUNDEEP
javascripthtmlcssflexboxsvelte
ITDW
ITDW

Reputation: 158

Input element not working with flex property

for some reason <input type="text"/> wont work with flex: 1;

using svelte btw but I dont think it matters

<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; /* doesnt work 😥😭🥵🤢🤮 */
    }
</style>

supposed to fit in container but instead just overflows like a 2cm flood barrier in florida after a categore 5 hurricane

Upvotes: 0

Views: 76

Answers (1)

CM K
CM K

Reputation: 198

HTML input elements have a default width. To override it, try the following:

input {
    flex-grow: 1;
    width: 0;
    max-width: // your preferred max width
}

Setting flex-grow to 1 and width to 0 will cause it to fill the parent container. max-width will limit its size.

Upvotes: 1

Related Questions