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    x000D   x000D   parent   x000D    display  flex  x000D    align-items  center  x000D    width  100   x000D    background-color   ececec  x000D    x000D   x000D   parent     x000D    width  100   x000D    x000D   x000D   parent  text   x000D    min-width  75px  x000D    flex-shrink  2 25  x000D    x000D   lt div class  parent  gt  x000D     lt input type  range  id  range  gt  x000D     lt input type  text  id  text  gt  x000D     lt label class  error  gt Error message lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

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.

_x000D_

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

_x000D_

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

_x000D_

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

[html] Force flex item to span full row width

Examples related to html

Examples related to css

Examples related to flexbox