我已经面对这个问题好几个小时了，我还没有找到解决方法，甚至没有找到其他问题的答案。 Flex google-chrome中的mozilla firefox似乎没有很好地定位。
我正在制作一个表格列表，作为日期报告显示，每个项目都包含一个表格，显示在该特定日期完成的活动，所有这些项目都在flex中显示column将标题日期放在表格上方的方向，也因为表格必须位于项目的中心。
一切正常，直到第二个项目被放置，第二个项目占用第一个项目所占用的空间的一部分，因为该项目没有达到它应该的高度，这应该随着内容增长
HTML结构的示例如下：
<div id="box-2">
<!-- repeat(Reports) -->
<div class="box-item">
<h5>{Reports[].date}</h5>
<div class="box-table">
<table>
<thead>
<tr>
<!-- Headers -->
</tr>
</thead>
<tbody>
<tr>
<!-- data -->
</tr>
...
...
...
</tbody>
</table>
</div>
</div>
</div>
和CSS是这样的：
#box-2{
display: flex;
flex-direction: column;
}
.box-item{
display: flex;
flex-direction: column;
}
.box-item > .box-table{
margin: 0 auto;
}
同样，当放置第二个项目框时，它会在某个时刻显示在第一个项目上，并且在第一个项目之后显示其他项目，这不会发生在Firefox中，但我仍然想要知道如何解决这个问题。
我为此创建了一个插件，因此我可以显示与orignal here
相似的代码答案 0 :(得分：1)
flex-shrink默认为1，这意味着允许灵活项目缩小以适应其灵活容器，这就是这里发生的事情。
删除所有内容，例如2 .box-item，以便它们适合其父级，并且您会看到它正确呈现。
将flex-shrink: 0;添加到.box-item，这样就可以了。
Stack snippet
body, html{
min-height: 100%;
height: 100%;
margin: 0;
font-family: arial;
}
hr{
width: 100%;
margin: 0 0 8px;
}
#main-content{
display: flex;
flex-direction: column;
height: 100%;
padding: 8px;
box-sizing: border-box;
}
#box-2{
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
.box-item{
flex-shrink: 0;
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
.box-item > h5{
margin: 0 0 10px;
}
.box-item > .box-table{
margin: 0 auto;
width: 60%;
}
.box-item > .box-table table{
width: 100%;
text-align: center;
border: 1px solid #CCC;
border-collapse: collapse;
border-spacing: 0;
}
.box-table table > thead{
background: #54585F;
color: #FFF;
height: 30px;
line-height: 30px;
}
.box-table table > tbody > tr:not(:last-of-type){
border-width: 0 0 1px;
border-style: solid;
border-color: #DDD;
} <div id="main-content">
<div id="box-1">
<h2>Box header</h2>
</div>
<hr>
<div id="box-2">
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-item">
<h5>Box item</h5>
<div class="box-table">
<table>
<thead>
<tr>
<th>header #1</th>
<th>header #2</th>
<th>header #3</th>
<th>header #4</th>
<th>header #5</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
<tr>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
<td><div>data</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>