Html 当我'；m使用流量箱，即使设置了最大高度_Html_Css_Flexbox

Html 当我'；m使用流量箱，即使设置了最大高度

html css

Html 当我'；m使用流量箱，即使设置了最大高度,html,css,flexbox,Html,Css,Flexbox,我现在有这个 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Madokami</title> <link rel="stylesheet" href="css/CSS"> </head> <body> <div class=

我现在有这个

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Madokami</title>
        <link rel="stylesheet" href="css/CSS">
    </head>
    <body>
        <div class="container">
            <div class="box color1">Box One</div>
            <div class="box color2">Box Two</div>
            <div class="box color3">Box Three</div>
            <div class="box color4">Box Four</div>
            <div class="box color5">Box Five</div>
        </div>
    </body>
</html>


马多卡米
方框一
方框二
方框三
方框四
方框五

我编写了这段代码，并用它创建了一个边栏，我可以在我的站点上使用flex，而不仅仅是创建单个框。问题是，当我使用FlexBox时，它总是离开现场，不想工作

我不太确定这个问题，但我看到

框三

重叠

框四

。这是因为宽度固定在

10%

且文本不合适

分配另一个

字体大小对我来说很有效。例如，我使用了视图窗口
-大小：vw
在您的.box
-类中，更改以下内容：
字体大小：1.2em至字体大小：2vw
我不确定我是否理解正确。但是，如果要将所有框拉伸到整个视口高度，而不是超过此高度，则可以将容器高度设置为100vh
，从框中删除固定的行高
，并将flex:1
添加到框中

正文{
保证金：0；
字体系列：verdena，无衬线；
背景：#262626；
}
.集装箱{
/*视口高度的100%*/
高度：100vh；
显示器：flex；
弯曲方向：立柱；
框大小：边框框；
}
.盒子{
/*拉伸框以填充100%的高度*/
弹性：1；
/*中心文本*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：15%；
填充：0.5em；
过渡：.5s；
}
.box:悬停{
宽度：30%
}
.color1{背景：#f00；}
.color2{背景：#A16340；}
.color3{背景：#A6A340；}
.color4{背景：#A12224；}
.color5{背景：#f66340；}

方框一
方框二
方框三
方框四
方框五
欢迎使用堆栈溢出！寻求代码帮助的问题必须包含在问题中重现问题所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。参见.is行高：200px真的有必要吗？它的目的是什么？