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?
.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_
}<div class="parent">_x000D_
<input type="range" id="range">_x000D_
<input type="text" id="text">_x000D_
<label class="error">Error message</label>_x000D_
</div>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
Source: Stackoverflow.com