Make element take full height of flex item container

Question

Is this a bug or what?

.page__header {
  background: lightgreen;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: stretch;
}
.page__header h1 {
  flex: 1 0;
}

.page__header button {
   order: 5;
}

.page__header div {
  align-self: left;
  order: 2;
  position: relative;
}
.page__header div input {
  min-width: 260px;
  padding: 0 1em;
  height: 100%;
  text-transform: uppercase;
}

<div class='page__header'>
  <h1>title</h1>
  <div>
    <input>
  </div>
  <button>some button</button>
</div>

Chrome, as always, refuses to cooperate.
Does anyone know how to force an input to take the full height of its flex item container?

On Firefox it obeys the 100% height.

Answer 1

Does anyone know how to force an input to take the full height of its flex item container?

Here are three options:

Option #1

Make the input a flex item by removing its div parent.

<div class='page__header'>
    <h1>title</h1>
    <input>
    <button>some button</button>
</div>

jsfiddle demo

NOTES:

• When wrapped by the div, the input is not a flex item. It's a child of a flex item, so it ignores flex properties.
• In a flex container, the flex items are the in-flow child elements only. Descendants beyond the children are not flex items and ignore flex properties.
• Once input is a child of the .page__header flex container, default flex properties (like align-items: stretch) apply.

---

Option #2

Make the div wrapping the input a flex container, converting input into a flex item.

HTML back to original:

<div class='page__header'>
    <h1>title</h1>
    <div>
        <input>
    </div>
    <button>some button</button>
</div>

CSS adjustments:

.page__header div {
    /* align-self: left; */
    order: 2;
    position: relative;
    display: flex; /* NEW */
}

.page__header div input {
    min-width: 260px;
    padding: 0 1em;
    /* height: 100%; REMOVE */
    text-transform: uppercase;
}

jsfiddle demo

NOTES:

• With the div flex item doubling as a (nested) flex container, default flex properties (like align-items: stretch) will apply to input.
• height: 100% is removed because it would otherwise override the flex align-* properties.

---

Option #3

Using percentage heights.

The reason that height: 100% wasn't working for you is because you weren't specifying heights for all parent elements, as required by the spec when using percentage heights. (The fact that it works in Firefox suggest that Chrome adheres more closely to the spec.)

If you're going to use percentage heights, and the element is not absolutely positioned, then you need to specify the height for each parent element up to and including body and the root element (html).

Add this to your CSS:

html, body { height: 100%; }
.page__header { height: 30%; }
.page__header div { height: 100%; }
.page__header div input {  height: 100%; }

jsfiddle demo

NOTES:

• Working with the CSS height property and percentage values

Answer 2

You can try taking it out-of-flow:

input {
  position: absolute;
  right: 0;
}

.page__header {
  background: lightgreen;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: stretch;
}
.page__header h1 {
  flex: 1 0;
}
.page__header div {
  align-self: left;
  order: 4;
  position: relative;
}
.page__header div input {
  min-width: 260px;
  padding: 0 1em;
  height: 100%;
  text-transform: uppercase;
  position: absolute;
  right: 0;
}

<div class='page__header'>
  <h1>title</h1>
  <div>
    <input>
  </div>
</div>

This may break your layout, though.