Html 将CSS flexbox容器行的高度设置为特定容器的高度
是否有可能让一行容器的flexbox实现的总高度等于特定容器的高度?我目前的基本CSS实现是:Html 将CSS flexbox容器行的高度设置为特定容器的高度,html,css,flexbox,Html,Css,Flexbox,是否有可能让一行容器的flexbox实现的总高度等于特定容器的高度?我目前的基本CSS实现是: .flex-container { display: flex; flex-direction: row; align-items: stretch; } 使用以下HTML: <div class="flex-container"> <div class="left-container"> stuff </div> <div
.flex-container {
display: flex;
flex-direction: row;
align-items: stretch;
}
使用以下HTML:
<div class="flex-container">
<div class="left-container">
stuff
</div>
<div class="right-container">
some other stuff
</div>
</div>
东西
一些其他的东西
问题是,。正确的容器
可能会变得非常高。因此,我想将.flex container
限制为.left container
的高度,不管它最终的高度是多少(我事先不知道)。这样,.right容器
就会有一个滚动条
那么,这是通过CSS实现的,还是我需要Javascript来实现?如果有帮助的话,我不必在这里使用flexbox,但我发现它在我的应用程序中使用起来最方便,除了这个高度问题。如果您设置3个元素的高度,并将
溢出-y
设置为左容器上的滚动
,应该可以做到这一点
.flex容器{
显示器:flex;
弯曲方向:行;
对齐项目:拉伸;
边框:实心1px灰色;
填充物:5px;
高度:150像素;
}
.左货柜{
边框:实心1px红色;
弹性:1;
高度:150像素;
}
.右集装箱{
边框:纯色1px蓝色;
弹性:3;
高度:150像素;
溢出y:滚动;
}
东西
一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他填充一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品一些其他物品
.flex容器{
显示器:flex;
弯曲方向:行;
对齐项目:拉伸;
宽度:300px;
高度:300px;
边框:1px实心#000;
}
.左货柜{
背景色:红色;
}
.右集装箱{
背景颜色:绿色;
}
东西
一些其他的东西
可以在它们上设置最大高度吗?只需设置高度:100%
->它永远不会超过您设置的最大高度
?我曾考虑过使用最大高度
,但我真的不知道会占用多少空间。左侧容器
会占用多少空间。实际上,它可以承受的高度范围很大。我所知道的是,我从不希望那个容器有滚动条。我的。正确的容器
可以非常非常高,这是我对约束的需要。如果我看不到其他解决方案,那么我可能只需要设置一些保守的max height
值