How do I give the input the remaining space?

For some reason when I put flex-grow: 1; on it it still doesn't grow and width: 100%; pushes the button down.

.submit-form {
        border: 2px solid red;
        display: flex;
        align-items: center;
        padding: 1.75rem 2rem;
        background: url(../images/bg-shorten-desktop.svg) no-repeat;
        background-color: $very-dark-blue;
        background-size: cover;
        border-radius: 8px;

        .form-input {
            padding: 0.75rem;
            border-radius: 8px;
            color: $dark-violet;
            border: none;
        }

        .form-btn {
            @include button(8px);
            margin-left: 1rem;
            padding: 0.75rem 2rem;
        }

.submit-form {
        border: 2px solid red;
        display: flex;
        align-items: center;
        padding: 1.75rem 2rem;
        background: url(../images/bg-shorten-desktop.svg) no-repeat;
        background-color: $very-dark-blue;
        background-size: cover;
        border-radius: 8px;

        .form-input {
            padding: 0.75rem;
            border-radius: 8px;
            color: $dark-violet;
            border: none;
        }

        .form-btn {
            @include button(8px);
            margin-left: 1rem;
            padding: 0.75rem 2rem;
        }

7 Replies

Kevin Powell•15mo ago

flex-grow: 1 should work. Could you share the HTML too?

lena_nekoOP•15mo ago

yes.

<section class="submit-form">
      <form>
        <input class="form-input" type="text" placeholder="Shorten a link here...">
        <button class="form-btn" type="submit">Shorten It!</button>
      </form>
    </section>

<section class="submit-form">
      <form>
        <input class="form-input" type="text" placeholder="Shorten a link here...">
        <button class="form-btn" type="submit">Shorten It!</button>
      </form>
    </section>

Kevin Powell•15mo ago

So, the input and button aren't flex items, because the parent is the form and not the .submit-form. I'd remove the display: flex from there, and put it on the form itself (or simply remove the entire section, and add that class to the form itself)

lena_nekoOP•15mo ago

I see 😁 It works now. Thank you.

ἔρως•15mo ago

a bit offtopic - you should use the url type, which automatically validates if it is valid or not, so you dont have to do it in javascript (you still are required to do it in the server) also, with a bit of trickery, you can implement the background in pure css, using the clip-path rule, which will save you a network request

lena_nekoOP•15mo ago

@ἔρως I didn't knew or forget that there was a url type thank you for the tips.

ἔρως•15mo ago

you're welcome by the way, you can use the :user-invalid pseudoclass to style it, to indicate it is an invalid url on google chrome, you will have to "emulate" it by using :focus:invalid

Gaming

Programming

How do I give the input the remaining space?

Did you find this page helpful?