1
我一直面對這個問題好幾個小時，我還沒有找到解決辦法，甚至沒有找到其他問題的答案。看起來Flex項目在google-chrome中的定位不好，因爲它們在mozilla firefox中。CSS：Flex項目不隨Chrome中的內容增長
我正在製作一張表格作爲日期報告顯示，每個項目都包含一個表格，顯示在該特定日期完成的活動，並且所有這些項目都以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中，但我仍然想知道如何解決這個問題。
我已經創造了這個普拉克，所以我可以表明相似之處更多與一部開拓創新here
請創建代碼片段，我們可以在 – Swellar
嘗試@Swellar的文檔片斷是在普拉克鏈接https：//開頭plnkr。 co/edit/s8wRmNepEH54bZtN9J5b？p = info – nosthertus