Question

这是一个错误还是什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Chrome一如既往地拒绝合作。
有没有人知道如何强制输入来获取 flex 项容器的完全高度？

在Firefox上它遵循100%高度。

Answer 1

有谁知道如何强制输入获取其弹性项容器的整个高度？

以下是三个选项：

选项＃1

通过删除input父级来使div成为弹性项目。

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

jsfiddle demo

注意：

当div包裹时，input不是灵活项目。它是flex项的子项，因此它忽略了flex属性。
在Flex容器中，flex items仅是in-flow子元素。子女之后的后代不是弹性项目而忽略弹性属性。
一旦input是.page__header弹性容器的子级，默认的弹性属性（如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%不适合您的原因是因为您没有为所有父元素指定高度，因为required by the spec使用百分比高度时。（它在Firefox中运行的事实表明Chrome更贴近规范。）

如果你要使用百分比高度，并且元素没有绝对定位，那么你需要指定每个父元素的高度，包括body和根元素（{{ 1}}）。

将此添加到您的CSS：

html

jsfiddle demo

注意：

Working with the CSS height property and percentage values

Answer 2

您可以尝试将其取消流程：

input {
  position: absolute;
  right: 0;
}

＆＃13;

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

＆＃13;

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

＆＃13;

但这可能会破坏你的布局。

使元素占据flex项容器的全高

2 个答案:

选项＃1

选项＃2

选项＃3