Css 按钮获取flexbox div的高度_Css_Flexbox

Css 按钮获取flexbox div的高度

css

Css 按钮获取flexbox div的高度,css,flexbox,Css,Flexbox,在下图中，按钮测量flexbox的高度？为什么？我希望它是一个常规的按钮底部与左边的图像对齐（白色正方形） index.css .grid-container{ display:grid; grid-template-rows:[nav-row-start]auto [nav-row-end logo-nav-row-start] auto [logo-nav-row-end content-row-start] auto [content-row-end]; } .na

在下图中，按钮测量flexbox的高度？为什么？我希望它是一个常规的按钮底部与左边的图像对齐（白色正方形）

index.css

.grid-container{
    display:grid;
    grid-template-rows:[nav-row-start]auto [nav-row-end logo-nav-row-start] auto [logo-nav-row-end content-row-start] auto [content-row-end];


}

.nav-style{
    height:5vh; /*make nav div take 5% of space of viewport*/
    background-color:black;

}

.logo-nav-style{
    height:20vh;/*make logo-nav div take 20% of space of viewport*/
    background-color:gray;
}

.nav-flexbox-container{
    display:flex;
    flex-direction:row-reverse;
}

.logo-nav-flexbox-container{
    display:flex;

}
.content-style{
    height:75vh;/*make content div take 75% of space of viewport*/
    background-color:white;
}


#nav{
    grid-row:nav-row-start/nav-row-end;
    margin:0px;
}

#logo-nav{
    grid-row:logo-nav-row-start/logo-nav-row-end;
    margin:0px;
}

#content{
    grid-row:body-row-start/body-row-end;
    margin:0px;
}

#profile-pic {
    margin:5px;
}
#mail-icon-pic{
    margin:5px;
}
#stats-icon-pic{
    margin:5px;
}

#logo-image{
    /*the max width and max height rule will make the image fit inside the div. If the image is bigger than div, the image will
    contract, if the image is smaller than the div, the image will expand*/
    max-width:100%;
    max-height:100%;
}
body{
    margin:0px;
}

index.html

<!DOCTYPE html>
<html>
<head>
<link  rel="stylesheet" type="text/css" href="index.css">
<title>Something</title>
</head>
<body>
<div class="grid-container">
    <div id="nav" class="nav-style nav-flexbox-container">
        <img id="stats-icon-pic" src="stats_icon.png"> 
        <img id="mail-icon-pic" src="mail_icon.png"> 
    </div>
    <div id="logo-nav" class="logo-nav-style logo-nav-flexbox-container">
        <img id="logo-image" src="example_logo.png">
        <button type="button">Questions</button>
    </div>
    <div id="content" class="content-style">body</div>
</div>
</body>
</html>


某物
问题
身体

我必须添加

对齐项目：柔性端

规则

.logo-nav-flexbox-container{
    display:flex;
    align-items: flex-end;
}

align items

flexbox属性设置为

stretch

使用以下命令：

.logo-nav-flexbox-container{
    display:flex;
    align-items: flex-start;
}