Flexbox: How to Get Divs to Fill Up 100% of the Container Width Without Wrapping

* {  box-sizing: border-box;}.wrapper {  width: 200px;  background-color: #EEEEEE;  border: 2px solid #DDDDDD;  padding: 1rem;}.boxcontainer {  position: relative;  left: 0;  border: 2px solid #BDC3C7;  transition: all 0.4s ease;  display: flex;}.boxcontainer .box {  width: 100%;  padding: 1rem;  flex-shrink: 0;}.boxcontainer .box:first-child {  background-color: #F47983;}.boxcontainer .box:nth-child(2) {  background-color: #FABCC1;}#slidetrigger:checked ~ .wrapper .boxcontainer {  left: -100%;}#overflowtrigger:checked ~ .wrapper {  overflow: hidden;}

<input type="checkbox" id="overflowtrigger" /><label for="overflowtrigger">Hide overflow</label><br /><input type="checkbox" id="slidetrigger" /><label for="slidetrigger">Slide!</label><div class="wrapper">  <div class="boxcontainer">    <div class="box">      First bunch of content.    </div>    <div class="box">      Second load  of content.    </div>  </div></div>

Flexbox under overflow not taking full width

The problem is that the container with the blue background is taking the width of the parent and not the content, to solve this you can change its property "display" to "inline-flex".

Then if you change the "flex" property of the .cell class to a "width" property the width you set will count for the parent and it will reach the blue container making it fill all the content.

      .problem {
        display: inline-flex;
        height: 100%;
        background-color: blue;
      }

      .cell {
        align-self: stretch;
        width: 100px;
      }

flexbox form not filling up full width of available space

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>

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

• What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

• How does flex-wrap work with align-self, align-items and align-content?

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

.form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-container div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 1rem;
}

<div class="form-container">

  <div>
    <label>Label1</label>
    <input value="input1" />
  </div>

  <div>
    <label>Label2</label>
    <input value="input2" />
  </div>

</div>