使元素占据弹性项目容器的全高

Question

这是错误还是什么？

.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一如既往的不肯配合。
有谁知道如何强制 input 获取其 flex[=31 的 full height =] 物品容器?

在 Firefox 上它遵循 100% 高度。

Answer 1

您可以尝试将其移出流程：

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>

不过这可能会破坏您的布局。

Answer 2

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

这里有三个选项：

选项#1

通过删除 div parent 使 input 成为弹性项目。

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

jsfiddle demo

备注：

当被 div 包装时，input 不是弹性项目。它是弹性项目的 child，因此它会忽略弹性属性。
在 flex 容器中，flex items 只是 in-flow child 元素。 children 之后的后代不是 flex 项目并忽略 flex 属性。
一旦 input 是 .page__header 弹性容器的 child，将应用默认弹性属性（如 align-items: stretch）。

选项#2

使 div 包装 input 成为弹性容器，将 input 转换为弹性项目。

HTML回到原来的：

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

CSS 调整：

.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

备注：

随着 div 弹性项目兼作（嵌套）弹性容器，默认弹性属性（如 align-items: stretch）将应用于 input。
height: 100% 被删除，因为它会覆盖 flex align-* 属性。

选项#3

使用百分比高度。

height: 100% 对您不起作用的原因是您没有为所有 parent 元素指定高度，如在使用百分比高度时。（它在 Firefox 中运行的事实表明 Chrome 更符合规范。）

如果您要使用百分比高度，并且元素不是绝对定位的，那么您需要为每个 parent 元素指定高度，包括 body 和根元素元素 (html).

将此添加到您的 CSS：

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

jsfiddle demo

备注：

使元素占据弹性项目容器的全高

Make element take full height of flex item container

html

css

flexbox

选项#1

选项#2

选项#3