flexbox form not filling up full width of available space-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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%;
}