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

这是虫子还是什么

。页眉{
背景：浅绿色；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：之间的空间；
对齐内容：拉伸；
对齐项目：拉伸；
}
.第页页眉h1{
弹性：10；
}
.页面标题按钮{
顺序：5；
}
.页眉分区{
对齐自我：左；
顺序：2；
位置：相对位置；
}
.page_uu页眉div输入{
最小宽度：260px；
填充：0.1em；
身高：100%；
文本转换：大写；
}

标题
一些按钮

您可以尝试将其从流程中删除：

输入{
位置：绝对位置；
右：0；
}

。页眉{
背景：浅绿色；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：之间的空间；
对齐内容：拉伸；
对齐项目：拉伸；
}
.第页页眉h1{
弹性：10；
}
.页眉分区{
对齐自我：左；
顺序：4；
位置：相对位置；
}
.page_uu页眉div输入{
最小宽度：260px；
填充：0.1em；
身高：100%；
文本转换：大写；
位置：绝对位置；
右：0；
}

标题

有人知道如何强制输入获取其flex item容器的全部高度吗

这里有三个选项：

选项1 通过删除

div

父项，使

输入成为弹性项

<div class='page__header'>
    <h1>title</h1>
    <input>
    <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;
}


注:


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


选项3
使用百分比高度

height:100%
不适用于您的原因是，您没有像使用百分比高度那样为所有父元素指定高度。（它在Firefox中工作的事实表明Chrome更符合规范。）

如果要使用百分比高度，并且元素不是绝对定位的，则需要指定每个父元素的高度，包括
主体
和根元素（
html
）

将此添加到CSS中：

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


注:



我不能，它是动态结构的一部分，我不知道它将以什么顺序定位为弹性项目。我想知道这上面是否有一个开放的bug..兄弟，你编辑我的问题并不酷，现在它不使用SASS，使用inspector调试也不那么容易。stackoverflow中的内联代码有时并不比jsbin好。@vsync注意stackoverflow要求在问题本身中包含代码。我认为一个可运行的代码段会很好，但是如果你愿意，可以随意删除这个代码段，包括SASS代码和jsbin的链接。谢谢你花时间回答这个问题，朋友！我很感激。事实上，将flex项设置为也具有
display:flex
，并从输入中删除
height
属性可以解决这个问题。谢谢在Chrome中，似乎任何东西在Flex项目中都无法获得高度百分比。。再说一次，Chrome很差劲。这怎么会是一个重复的问题呢？只是因为它随机变得更受欢迎？可笑的是，当有人问它时，它应该被标记为复制品：/
html, body { height: 100%; }
.page__header { height: 30%; }
.page__header div { height: 100%; }
.page__header div input {  height: 100%; }