user3494047 user3494047 - 27 days ago 6
CSS Question

flex basis not applied when two divs containing the element

I have an input element which I want to grow and shrink using flex shrink but its flex-basis size is not being applied.

Here is my html:

<div class="flex-container">
<div class="flex-row">
<input type="text" name="query" class="searchbar" />
</div>
<div>


and my css:

.flex-container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}

.flex-row input { flex: 0 1 450px; }


why is the basis size not being applied? it is getting set to a much smaller width than 450px.

Here is a fiddle with the example.

Answer

Actually what is happening here is that your input's immediate parent .flex-row is a simple div with no css properties and also not set to be a flex container hence it's width is auto and wrapping around the input and not applying the flex properties. To apply flex properties to the input use the following css to make the input's parent display be flex.

.flex-container{
   display: flex;
 }

.flex-row {
    display: flex;
    flex:1;
    align-items: center;
    justify-content: center;
}

.flex-container input { flex: 0 1 450px; }

Hope this helps.

Comments