why is flex-basis size not being applied?

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.

because it applies to a child of a flex box : https://jsfiddle.net/614abhj2/2/ — G-Cyrillus, Nov 07 '16 at 15:25
`flex`, `flex-basis`, `flex-grow` and `flex-shrink` are properties that apply to *flex items* (the children of a flex container). For sizing a flex container, you can use `width`, `height`, `min-width`, `max-width`, `min-height` and `max-height`. More details here: http://stackoverflow.com/q/34352140/3597276 — Michael Benjamin, Nov 07 '16 at 15:59

score 1 · Accepted Answer · answered Nov 07 '16 at 15:29

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; }

Ricky Ruiz · Answer 2 · 2016-11-07T15:43:54.977

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

score 0 · Answer 3 · answered Nov 07 '16 at 15:28

0

/* 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

answered Nov 07 '16 at 15:28

GvM

1,685
11
13

what's the difference? – user3494047 Nov 07 '16 at 20:13

score 0 · Answer 4 · answered Nov 07 '16 at 15:33

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!

why is flex-basis size not being applied?

4 Answers4