Html 使用flex在左侧全高挡块

我有我的界面，保持块A在左侧（全高）。我知道我的实际实现是错误的，因为块A没有正确地占用全高空间，但我对

flex

属性是新手

如何在左侧设置一个精确的全高挡块

jsfiddle：

.container，
html，
身体{
身高：100%；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.项目，
.街区{
背景色：红色；
保证金：5px；
填充物：5px；
}
.itemA{
宽度：30px；
高度：100vh；
浮动：左；
}
.项目b{
flex:0100px；
显示器：flex；
}
.街区{
弹性：1；
显示：无；
}
.项目D{
弹性：1；
}
.B1项，
.项目B2，
.项目B3{
弹性：1；
}

A.
地下一层
地下二层
地下三层
D

您还必须调整应用于项目的填充和边距。使用

calc（）

.container，
html，
身体{
身高：100%；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.项目，
.街区{
背景色：红色；
保证金：5px；
填充物：5px；
}
.itemA{
宽度：30px；
高度：计算（100vh-20px）；
浮动：左；
}
.项目b{
flex:0100px；
显示器：flex；
}
.街区{
弹性：1；
显示：无；
}
.项目D{
弹性：1；
}
.B1项，
.项目B2，
.项目B3{
弹性：1；
}

A.
地下一层
地下二层
地下三层
B1区
B2区
B3区
D区
D

您还必须调整应用于项目的填充和边距。使用

calc（）

.container，
html，
身体{
身高：100%；
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.项目，
.街区{
背景色：红色；
保证金：5px；
填充物：5px；
}
.itemA{
宽度：30px；
高度：计算（100vh-20px）；
浮动：左；
}
.项目b{
flex:0100px；
显示器：flex；
}
.街区{
弹性：1；
显示：无；
}
.项目D{
弹性：1；
}
.B1项，
.项目B2，
.项目B3{
弹性：1；
}

A.
地下一层
地下二层
地下三层
B1区
B2区
B3区
D区
D

谢谢，但是有没有办法防止使用float:left和只用flex方法？是的，为此您需要有一个包装器，然后使用flex。与正确的容器相同。另一个选择是网格。谢谢，但有没有办法阻止使用float:left和只用flex方法？是的，为此你需要有一个包装器，然后使用flex。与正确的容器相同。另一个选择是网格。