【发布时间】：2020-05-07 06:45:12
【问题描述】：
我有以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
.list {
line-height: 22px;
}
.list:before,
list:after {
display: table;
content: "";
}
.list:after {
clear: both;
}
.right-item {
float: left;
width: 50px;
height: 50px;
display: table;
background-color: blue;
border: 1px solid green;
display: table;
float: left;
width: 50px;
height: 50px;
margin-right: 8px;
margin-bottom: 8px;
text-align: center;
vertical-align: top;
}
.wrapper {
display: inline-block;
width: 100%;
}
.wrapper:before,
.wrapper:after {
content: "";
display: table;
}
.wrapper:after {
clear: both;
}
.floated-item {
float: left;
width: 50px;
height: 50px;
background-color: red;
border: 1px solid black;
margin: 0 8px 8px 0;
}
.flex-item {
flex: auto;
max-width: 100%;
}
.flex-container {
display: flex;
align-items: center;
min-height: 15px;
position: relative;
align-items: center;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 1px;
position: relative;
max-width: 100%;
}
.outer-wrapper {
display: flex;
flex-flow: column wrap;
margin-bottom: 24px;
vertical-align: top;
}
.label {
flex-grow: 0;
overflow: hidden;
display: inline-block;
position: relative;
max-width: 100%;
min-height: 1px;
}
.label-inner {
height: auto;
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
}
</style>
</head>
<body>
<form>
<div class="outer-wrapper">
<div class="label"><label class="label-inner">Label</label></div>
<div class="flex-column">
<div class="flex-container">
<div class="flex-item">
<span class="wrapper">
<div class="list">
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
<div class="floated-item">
<span><div class="floated-item"></div></span>
</div>
</div>
<div class="right-item"></div>
</span>
</div>
</div>
</div>
</div>
</form>
<div>content</div>
</body>
</html>起初，我不知道添加的额外空间会发生什么。经过长时间的调试，问题是（至少看起来是，它修复了额外的空间，但可能是其他原因导致它，我不知道）flex-wrap: wrap 用于.outer-wrapper。当我将其设置为 flex-wrap: nowrap 时，它会修复额外的空间。
我浏览了 Flexbox 规范，也浏览了 CSS 规范的 Visual Formatting Model，关于浮点使用、格式化上下文等，但我仍然不知道可能是什么问题。
【问题讨论】：
-
问题似乎是由浮动项引起的。如果从
.right-item中删除float: left和display: table，问题就会消失。我不确定 float 和 flex 规范是如何协同工作的，但浏览器似乎将额外的空白解释为浮动项目的高度。 -
所需的布局是底部没有多余的空间。我想了解不同的布局机制是如何根据规范相互工作的，我无法向自己解释为什么这不起作用。如果有人根据规范解释所有内容如何组合在一起，我将不胜感激。
-
在这种情况下，我不会对规格过于重视。
column wrap仍然充满了所有浏览器的错误。 stackoverflow.com/a/61172784/3597276 -
是的，我同意。你知道这是什么特定的错误吗？在这种情况下，它似乎增加了项目的高度。我想它不会使弹性容器成为多行容器，只会增加项目的高度。你有什么想法？
-
我不确定您遇到的是哪个错误，但也许您可以解决它。这是你需要的吗？ jsfiddle.net/r73tvhjg