Html flexbox型号上的左菜单没有'；t扩展它'；s高度动态变化
我有一个静态的左列和一个右侧的主体。在页面加载时，左侧菜单与浏览器正确匹配。如果我调整浏览器的大小，它将继续很好地适应。但是，当右栏的主体展开超过左栏时，左菜单不会随之展开（使用动态内容） 例如： HTML 如果你点击这个按钮，你可以看到左边的菜单没有随着内容展开 我错过了什么？我注意到，如果我进入chrome中的调试器，html主体高度将永远不会更新Html flexbox型号上的左菜单没有'；t扩展它'；s高度动态变化,html,css,flexbox,Html,Css,Flexbox,我有一个静态的左列和一个右侧的主体。在页面加载时，左侧菜单与浏览器正确匹配。如果我调整浏览器的大小，它将继续很好地适应。但是，当右栏的主体展开超过左栏时，左菜单不会随之展开（使用动态内容） 例如： HTML 如果你点击这个按钮，你可以看到左边的菜单没有随着内容展开 我错过了什么？我注意到，如果我进入chrome中的调试器，html主体高度将永远不会更新 谢谢 它没有按预期工作，因为您显式地将html/body元素的高度设置为100%，然后将左侧菜单。侧栏元素的高度也设置为100% 这样做时，左侧
谢谢 它没有按预期工作，因为您显式地将
htmlbody100%。侧栏元素的高度也设置为100%
这样做时，左侧菜单的高度不会超出100%
（即使您添加了更多内容，就像您的情况一样）。似乎您想给这些元素一个minheight
的100%
。这样，高度将至少为100%
，然后根据内容展开
旁注：您只需在html
/body
元素上设置min height
，因为.sidebar
元素是flexbox子元素，它将展开以匹配父元素的高度，在这种情况下，body
元素的最小高度为100%
。只需完全像上面链接的示例一样，省略.sidebar
元素上的高度
或者，您也可以使用视口百分比单位，直接在侧栏上设置最小高度为100vh
非常感谢。这完全有道理。
<body>
<div class="sidebar">
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
<div class="main">
<div class="content"></div>
</div>
html,body {
height: 100%;
background-color: #7F7E7E;
color: #000000;
display: flex;
flex-direction: row;
padding: 0;
margin : 0;
}
.sidebar {
height: 100%;
flex: 0 0 250px;
background-color: #000;
padding-left: 20px;
color:white;
}
.main {
flex: 1;
}
html, body {
min-height: 100%;
background-color: #7F7E7E;
color: #000;
display: flex;
flex-direction: row;
margin: 0;
}
.sidebar {
min-height: 100vh;
flex: 0 0 250px;
}