AnApprentice AnApprentice - 3 years ago 85
CSS Question

How to get Flexbox to allow an input to be 100% width?

I have the following flexbox form powered by bootstrap 4.

https://jsfiddle.net/kkt0k2bs/1/

I have a media query to resize the form elements for smaller display.

On larger displays, I want the form items to be inline, but on smaller screens, I want the form elements to be stacked and at 100%.

The input is not going 100% width on smaller displays... How can I enable the code to get the width to 100% on smaller displays?

HTML:

<div class="form-mod">
<form class="form-inline justify-content-center d-inline-flex">
<div class="form-group">
<div>
<input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Request an Invite</button>
</div>
</form>
</div>


CSS:

.form-mod {
display: inline-block;
text-align: center;
padding: 16px 32px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3;
box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);

[type="text"] {
width: 260px;
margin-right: 16px;
border-radius: 100px;
padding-left: 18px;
border-radius: $border-radius;
font-size: 16px;
}

@include media-breakpoint-down(sm) {
.form-group {
width: 100%;
}
[type="text"] {
width: 100%;
margin: 0 0 16px 0;
display: block;
}
opacity: .5;
}
}

Answer Source

Add this to your code:

.form-group {
  flex: 1 0 auto;
}

revised demo

This tells flex items to share space when on the same line.

But when they break onto separate lines, each will consume all available space.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download