why is flex-basis size not being applied? - html

Question

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:
<input type="text"/>
and my css:
input{
background-color: black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
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 1

You have applied display: flex to the <input> element instead of a div.
The ideal way is to use a container/wrapper and then make the container display: flex & then control the input using flex-basis - Here is your Fiddle updated
HTML
<div class="container">
<input type="text"/>
</div>
CSS
.container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.container input { flex: 0 1 450px; }

Answer 2

You need to establish a flex formatting context.
This is the same as establishing a block formatting context, except
that flex layout is used instead of block layout.
For properties like flex-basis, flex-grow, flex-shrink to work, an element must participate in the flex formatting context.
A flex item establishes a new formatting context for its contents. The
type of this formatting context is determined by its display value, as
usual. However, flex items themselves are flex-level boxes, not
block-level boxes: they participate in their container’s flex
formatting context, not in a block formatting context.
var el = document.querySelector("input");
console.log("input width: " + el.offsetWidth + "px");
.flex-container { /* Flex formatting context, this makes the element a flex container */
display: flex;
}
input { /* Direct children of flex containers are now flex items */
background-color: black;
flex: 0 1 450px;
box-sizing: border-box;
}
<section class="flex-container">
<input type="text" />
</section>
Revised jsFiddle
Source: W3C CSS Flexible Box Layout Module Level 1

Answer 3

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
display:flex;
}
input{
background-color: black;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
flex: 0 1 450px;
}
<input type="text"/>
check this

Answer 4

Apply flex properties to a input container rather than to the input.
Have a look at the snippet below:
.input-holder {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.input-holder input {
flex: 0 1 450px;
background: #000;
}
<div class="input-holder">
<input type="text"/>
</div>
Hope this helps!