CODEWITHSUNDEEP
htmlcssflexbox
user3494047
user3494047

Reputation: 1693

why is flex-basis size not being applied?

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.

Upvotes: 1

Views: 2523

Answers (4)

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

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

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: -1

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

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

Upvotes: 0

GvM
GvM

Reputation: 1733

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

Upvotes: 0

Related Questions