Html 如何将flex容器保存在一个页面中而无需滚动

我正在创建一个网页，它需要在一个页面中显示一些电影封面，而不需要滚动，因为它会显示出来。问题是我想让内容调整大小，而不是使网页可滚动。我还需要支持n部电影（它们是独立的）。我试过两次使用flexbox，但都不起作用。另外，我正在使用tailwindcss框架，但我不认为这是一个问题，因为它只是类形式的css

0
标题

我不认为没有JavaScript就可以实现您的要求。在下面的示例中，我使用CSS来保持封面的比例，并使用JavaScript来计算阻止内容垂直滚动的最大宽度

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } 设numCovers=10； let coverList=document.querySelector（“.coverList”）； //此函数确定封面列表宽度的百分比 //每个封面都应该有足够的空间。这将最大限度地扩大它们的规模 //不使总网格大小大于封面列表。 //这应该可以防止滚动。 函数getBasis（）{ 让压比=1.35；//高度/宽度 let width=coverList.clientWidth； let height=封面列表。clientHeight； //这个循环真的很慢，你可能想找到一个更快的方法 设col=0； 让accWidth、accHeight、numRows； 做{ col++； if（col>numCovers）{ //最大化高度 返回（高度/比率）+“px”； } accWidth=宽度/列； accHeight=accWidth*比率； numRows=Math.ceil（numCovers/col）； }同时（acchheight*numRows>height）； 返回值（100/列）+“%”； } 函数generateCovers（）{ //清除现有封盖 coverList.innerHTML=“”； let basis=getBasis（）； for（设i=0；i

正文{
/*将封面列表计算的边距设置为可计算值*/
保证金：5px；
}
#控制{
高度：25px；
}
.封面清单{
/*使用calc核算保证金和控制*/
宽度：计算（100vw-10px）；
高度：计算（100vh-35px）；
/*使用flex，以便内容将根据需要进行包装*/
显示器：flex；
柔性包装：包装；
对齐内容：开始；
}
.内部{
/*填充百分比基于宽度，因此设置
将高度设置为0，将底部填充为百分比
允许我们保持一个比率*/
宽度：100%；
身高：0；
垫底：135%；
}

封面数量：

我不认为没有JavaScript就可以实现您的要求。在下面的示例中，我使用CSS来保持封面的比例，并使用JavaScript来计算阻止内容垂直滚动的最大宽度

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } 设numCovers=10； let coverList=document.querySelector（“.coverList”）； //此函数确定封面列表宽度的百分比 //每个封面都应该有足够的空间。这将最大限度地扩大它们的规模 //不使总网格大小大于封面列表。 //这应该可以防止滚动。 函数getBasis（）{ 让压比=1.35；//高度/宽度 let width=coverList.clientWidth； let height=封面列表。clientHeight； //这个循环真的很慢，你可能想找到一个更快的方法 设col=0； 让accWidth、accHeight、numRows； 做{ col++； if（col>numCovers）{ //最大化高度 返回（高度/比率）+“px”； } accWidth=宽度/列； accHeight=accWidth*比率； numRows=Math.ceil（numCovers/col）； }同时（acchheight*numRows>height）； 返回值（100/列）+“%”； } 函数generateCovers（）{ //清除现有封盖 coverList.innerHTML=“”； let basis=getBasis（）； for（设i=0；i

正文{
/*将封面列表计算的边距设置为可计算值*/
保证金：5px；
}
#控制{
高度：25px；
}
.封面清单{
/*使用calc核算保证金和控制*/
宽度：计算（100vw-10px）；
高度：计算（100vh-35px）；
/*使用flex，以便内容将根据需要进行包装*/
显示器：flex；
柔性包装：包装；
对齐内容：星号