Consider the situation below:

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

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

```html
<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?](https://stackoverflow.com/questions/30684759/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.
> 
> 
> 

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

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

```html
<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?](https://stackoverflow.com/questions/30684759/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.
> 
> 
> 

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

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

```html
<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](https://stackoverflow.com/questions/50455838/flexbox-not-full-width/50455875)

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?