Force flex item to span full row width

Question

I'm trying to retain the first 2 child elements on the same row while the third element is in its own below at full width, all while using flex.

I'm particularly interested in using the flex-grow and flex-shrink properties on the first 2 elements (which is one of my reasons for not using percentages) however the third element really must be full width and below the first two.

The label element is added programmatically after the text element when there's an error and I can't change the code.

How do I force the label element to span a 100% width below the other two elements which are positioned using flex?

Answer 1

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>

More info: The initial value of the flex-wrap property is nowrap, which means that all items will line up in a row. MDN