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>
Question&Answers:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…