flexbox form not filling up full width of available space

Question

Consider the situation below:

.form-container {
  background-color: red;
}

.search-form {
  display: flex;
  align-items: flex-start;
}

<div class="form-container">
  <form role="search" method="get" class="search-form" action="/">
    <label>
      <span class="screen-reader-text">Test form</span>
      <input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
    </label>
    <input type="submit" class="search-submit button" value="search" />
  </form>
</div>

I need to have this flex form fill out full width, so that it covers the red but it won't for some reason...

Flexbox: how to get divs to fill up 100% of the container width without wrapping?

to prevent the flex items from shrinking, set the flex shrink factor to 0:

The flex shrink factor determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.

.form-container {
  background-color: red;
}

.search-form {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

<div class="form-container">
  <form role="search" method="get" class="search-form" action="/">
    <label>
      <span class="screen-reader-text">Test form</span>
      <input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
    </label>
    <input type="submit" class="search-submit button" value="search" />
  </form>
</div>

Doesn't work..

I also attempted width: 100%;

Also from Flexbox: how to get divs to fill up 100% of the container width without wrapping?

In my case, just using flex-shrink: 0 didn't work. But adding flex-grow: 1 to it worked.

.form-container {
  background-color: red;
}

.search-form {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  flex-grow: 1;
}

<div class="form-container">
  <form role="search" method="get" class="search-form" action="/">
    <label>
      <span class="screen-reader-text">Test form</span>
      <input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
    </label>
    <input type="submit" class="search-submit button" value="search" />
  </form>
</div>

Flexbox not full width

I already tried flex-grow above and it didn't do anything.

How do you make a flex form fill full width of it;'s parent container?

it is filling the full width... but it doesn't have a background color so you see the red color from the parent. Are you wanting the children (the `label` and the `input`) to be full width of the form? — zgood, Oct 05 '21 at 16:11
so I wanted it to completely cover the red, as in full width in context of the container, `label` needed a `flex-grow` prop on it... — kawnah, Oct 05 '21 at 16:12

score 1 · Answer 1 · answered Oct 05 '21 at 16:14

1

your body element likely has a margin and wasn't set to a width of 100%. You also don't define the width of the parent container so, it's defaulting to auto.

This can be remedied as follows:

body {
    width: 100%;
    margin: 0;
}

.form-container {
    background-color: red;
    width: 100%;
}

answered Oct 05 '21 at 16:14

hellobobbysouza

175
1
7

I got tripped up its `flex-grow` on a child in my case the label. – kawnah Oct 05 '21 at 16:37

score 0 · Accepted Answer · answered Oct 05 '21 at 16:10

Ok I figured it out you do it on the child

.form-container {
  background-color: red;
}

.search-form {
  display: flex;
  align-items: flex-start;
}

.sesrch-form label {
  flex-grow: 1;
}

<div class="form-container">
  <form role="search" method="get" class="search-form" action="/">
    <label>
      <span class="screen-reader-text">Test form</span>
      <input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
    </label>
    <input type="submit" class="search-submit button" value="search" />
  </form>
</div>

flexbox form not filling up full width of available space

2 Answers2