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;
}
No description
7 Replies
Kevin Powell
Kevin Powell13mo ago
flex-grow: 1 should work. Could you share the HTML too?
lena_neko
lena_nekoOP13mo 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
Kevin Powell13mo 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_neko
lena_nekoOP13mo ago
I see 😁 It works now. Thank you.
ἔρως
ἔρως13mo 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_neko
lena_nekoOP13mo ago
@ἔρως I didn't knew or forget that there was a url type thank you for the tips.
ἔρως
ἔρως13mo 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
Want results from more Discord servers?
Add your server