I have a specific element that incorporates flex display and I've defined its width with the flex-basis property like this:
.flex-row input { flex: 0 1 450px; }
There is a flex-row division nested inside a flex-container division.
My goal is for the flex-row to match the width of the input element.
When I set the flex-container to have display: flex, it spans 100% of the width.
However, changing it to display: inline-flex causes the input to shrink, not maintaining the 450px width.
Although I'm not concerned about the width of the flex-container, it would be convenient for it to match its child's width. How can I ensure that the flex-row remains the same width as the input, particularly when there is enough space available (not exceeding 450px)?
.flex-container {
display: flex;
}
.flex-row {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.flex-row input {
flex: 0 1 450px;
}<div class="flex-container">
<div class="flex-row">
<input type="text" name="query" class="searchbar" />
</div>
</div>View the demo here.