使元素占据 Flex 项目容器的整个高度

Question

这是否是一个bug或者其他问题？

.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 容器的完整高度？

在Firefox中，它遵循 100% 高度。

- vsync

---

似乎在Flex项目内部，Chrome无法以百分比获取高度...又是Chrome烂透了。 - vsync

这怎么可能是一个重复问题，而且是在这个问题之后提出的？只是因为它突然变得更受欢迎了吗？太荒谬了，当它被提出时就应该被标记为重复问题 :/ - vsync

Answer 1

有人知道如何强制输入框占据其flex容器的整个高度吗？

以下是三个选项：

选项1

通过删除其div父元素，将input设置为flex项目。

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

jsfiddle演示

注：

• 当被 div 包裹时，input 不是一个弹性项。它是一个弹性项的子元素，因此会忽略弹性属性。
• 在弹性容器中，弹性项 只是内部流动的子元素。超出这些子元素的后代不是弹性项，会忽略弹性属性。
• 一旦 input 成为 .page__header 弹性容器的子元素，会应用默认的弹性属性（例如 align-items: stretch）。

---

选项 #2

将包裹 input 的 div 设为弹性容器，将 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演示

注意事项：

• 使用 div 作为嵌套的 flex 容器，会应用默认的 flex 属性（例如 align-items: stretch）到 input 上。
• 移除 height: 100% 是因为它会覆盖 flex 的 align-* 属性。

---

选项 #3

使用百分比高度。

如果 height: 100% 不起作用，那是因为您没有为所有父元素指定高度，这是使用百分比高度时规范要求的。（Firefox 中可以工作的事实表明 Chrome 更严格地遵循规范。）

如果您要使用百分比高度，并且元素没有绝对定位，则需要为每个父元素指定高度，包括 body 和根元素（html）。

将此添加到您的 CSS：

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

jsfiddle演示

注：

• 使用CSS的height属性和百分比值

- Michael Benjamin

---

确实，将 flex 项目设置为 display:flex 并从输入中删除 height 属性解决了问题。谢谢！ - vsync

Answer 2

你可以尝试将其取出流程：

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>

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

- Oriol

---

我不行，它是动态结构的一部分，我不知道它将以何种顺序作为 flex 项定位。我想知道这方面是否有一个公开的 bug。 - vsync

兄弟，你修改我的问题不太好，现在它没有使用SASS，而且使用检查器调试也不那么容易了。有时候在stackoverflow中使用内联代码并不比jsbin更好。 - vsync

请注意，在StackOverflow上，需要将代码包含在问题本身中。我认为可运行的片段会很好，但如果您想要，可以删除片段，包括SASS代码和jsbin链接。 - Oriol

感谢您花时间尝试回答这个问题，朋友！我很感激。 - vsync