爲什麼Firefox會忽略flex-item的底部邊距？

僅當有足夠空間時纔會考慮margin-bottom。否則，Firefox的行爲就好像根本沒有margin-bottom。爲什麼Firefox會忽略flex-item的底部邊距？

Chrome的全部：

鉻收縮：

火狐收縮：

是否正確flexbox的行爲？如何解決它？

.container { 
 
    position: fixed; 
 
    display: flex; 
 
    flex-direction: column; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
} 
 

 
.grow { 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
    background: #8f8; 
 
} 
 

 
.content { 
 
    width: 500px; 
 
    margin: 20px auto; 
 
    border: 1px solid currentColor; 
 
    background: #f88; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="grow"></div> 
 
    <div class="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, facilis omnis inventore, illum eos quis fuga quos id, labore consectetur quas. Unde sed nemo nobis recusandae saepe ex nulla accusantium?</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores a enim magnam voluptatem. Ab sint possimus quis odit vero explicabo unde quod rem, quasi voluptatibus cupiditate voluptatem veritatis repudiandae.</p> 
 
    </div> 
 
    <div class="grow"></div> 
 
    </div> 
 
</body>

來源

2017-06-06 vbarbarosh

考慮增加一個'柔性basis'爲'.grow'。 https://codepen.io/anon/pen/LLVpZN?editors=1100 –

@Michael_B使用'flex-basis'你將強制擁有至少1px高的'.grow'元素。當屏幕太小時，我不想要它們。 – vbarbarosh

我覺得這是發生了什麼：當窗口太小，<div class="grow"></div>元素收縮一路下降到0像素的高度。現在Firefox甚至不打擾渲染它們。因此，您在<div class="content"></div>元素下沒有任何元素，因此該元素的底部邊距無法應用。只有一個帶有下邊距的元素的頁面具有相同的效果。

我會設置你的html/css不同，所以你不會遇到這個問題。您可以在content div周圍使用容器，並在其上應用填充。

來源

2017-06-06 12:02:34 rednaw

這是正確的行爲（Chrome和IE沒有這個問題）？ – vbarbarosh

我堅持flex-direction: row只有一個彈性項目有margin: auto。在裏面我放了我的容器。這樣，它在Chrome，火狐，IE和Safari工程沒有問題：

codepen

.container { 
 
    position: fixed; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    /* when using *column* Safari 9.0 and below will ignore bottom margins */ 
 
    flex-direction: row; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
    background: #f88; 
 
} 
 
.content-wrapper { 
 
    margin: auto; 
 
} 
 
.content { 
 
    width: 500px; 
 
    margin: 20px; 
 
    border: 1px solid currentColor; 
 
    background: #8f8; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="content-wrapper"> 
 
     <div class="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, facilis omnis inventore, illum eos quis fuga quos id, labore consectetur quas. Unde sed nemo nobis recusandae saepe ex nulla accusantium?</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores a enim magnam voluptatem. Ab sint possimus quis odit vero explicabo unde quod rem, quasi voluptatibus cupiditate voluptatem veritatis repudiandae.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-06-07 10:35:09 vbarbarosh

爲什麼Firefox會忽略flex-item的底部邊距？

回答

相關問題