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 { display: flex; align-items: center; width: 100%; background-color: #ececec; } .parent * { width: 100%; } .parent #text { min-width: 75px; flex-shrink: 2.25; }
<div class="parent"> <input type="range" id="range"> <input type="text" id="text"> <label class="error">Error message</label> </div>
By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch. This Pen is owned by dev on CodePen.
Getting the child of a flex-item to fill height 100%Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With