我有一个 flex box，里面有 2 个并排的元素 通常 flexbox 中的元素会自动占用所有空间...
但不是这里...我尝试手动将高度设置为 height:100%...什么都不行
我哪里错了？ (菜单元素应该采用所有可用的高度，例如我人为地为蓝色元素设置了固定高度......但在我的代码中它应该根据内容而变化所以设置菜单像素不是一个选项)
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="./test2.css">
</head>
<body>
<div class="framehome">
<div class="myaccountwrapper">
<div class="myaccountleft">
Menu
</div>
<div class="myaccountright">
<div id="windowmyaccount" class="submenu" id="boxaccount">
Change my Handle
</div>
<div id="windowhandle" class="submenu" id="boxaccount">
Change my Handle
</div>
</div>
</div>
</div>
</body>
CSS:
.myaccountwrapper{
display:flex;
flex-direction:row;
align-items:center;
color:lightgrey;
background-color:green;
}
.myaccountleft{
display: flex;
flex-direction: column;
width:250px;
height:100%;
background-color:red;
}
.myaccountright{
flex-grow: 1;
background-color:blue;
height:300px;
}
最佳答案
您将父 .myaccountwrapper 的 align-items 属性设置为 center 的值，这会阻止 flex- 的默认行为项，即填充父级的高度。
默认情况下，align-items 属性的值设置为 stretch，这会导致 flex-items 沿垂直/交叉轴拉伸(stretch)。
因此，要解决您的问题，只需删除或注释掉父级的 align-items 属性即可。
我假设您想填充整个视口(viewport)高度，所以我将父级的 height 设置为 100vh。
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.myaccountwrapper {
display: flex;
/*align-items: center; the culprit */
color: lightgray;
background-color: green;
height: 100vh; /* needs to be set if you want that flex-items fill the viewport height */
}
.myaccountleft {
display: flex;
flex-direction: column;
width: 250px;
background-color: red;
}
.myaccountright {
flex: 1;
background-color: blue;
}<div class="framehome">
<div class="myaccountwrapper">
<div class="myaccountleft">
Menu
</div>
<div class="myaccountright">
<div id="windowmyaccount" class="submenu" id="boxaccount">
Change my Handle
</div>
<div id="windowhandle" class="submenu" id="boxaccount">
Change my Handle
</div>
</div>
</div>
</div>与 align-items: center 的比较:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
.myaccountwrapper {
display: flex;
align-items: center;
color: lightgray;
background-color: green;
height: 100vh;
}
.myaccountleft {
display: flex;
flex-direction: column;
width: 250px;
background-color: red;
}
.myaccountright {
flex: 1;
background-color: blue;
}<div class="framehome">
<div class="myaccountwrapper">
<div class="myaccountleft">
Menu
</div>
<div class="myaccountright">
<div id="windowmyaccount" class="submenu" id="boxaccount">
Change my Handle
</div>
<div id="windowhandle" class="submenu" id="boxaccount">
Change my Handle
</div>
</div>
</div>
</div>关于html - Flexbox 大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47517924/