यह margin-bottom का सम्मान तभी करता है जब इसके लिए पर्याप्त जगह हो। अन्यथा फ़ायरफ़ॉक्स ऐसा व्यवहार करता है जैसे कि कोई margin-bottom ही नहीं है।

क्रोम पूर्ण:

Chrome Full

क्रोम सिकुड़ा हुआ:

Chrome Shrinked

फ़ायरफ़ॉक्स सिकुड़ गया:

Firefox Shrinked

क्या यह फ्लेक्सबॉक्स का सही व्यवहार है? इसे कैसे जोड़ेंगे?

कोडपेन

.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>
2
vbarbarosh 6 जून 2017, 14:43
flex-basis को .grow में जोड़ने पर विचार करें। codepen.io/anon/pen/LLVpZN?editors=1100
 – 
Michael Benjamin
6 जून 2017, 15:25
flex-basis का उपयोग करके आप कम से कम 1px ऊंचाई वाले .grow तत्व रखने के लिए बाध्य होंगे। जब स्क्रीन बहुत छोटी होती है तो मैं उन्हें नहीं चाहता।
 – 
vbarbarosh
7 जून 2017, 12:52

2 जवाब

मुझे लगता है कि यही हो रहा है: जब खिड़की बहुत छोटी होती है, तो <div class="grow"></div> तत्व 0 पिक्सेल की ऊंचाई तक पूरी तरह सिकुड़ जाते हैं। अब फ़ायरफ़ॉक्स उन्हें रेंडर करने की जहमत भी नहीं उठाता। तो आपके पास <div class="content"></div> तत्व के नीचे कोई तत्व नहीं है, और इसलिए उस तत्व का निचला मार्जिन लागू नहीं होता है। निचले मार्जिन वाले केवल एक तत्व वाले पृष्ठ का प्रभाव समान होता है।

मैं आपके एचटीएमएल/सीएसएस को अलग तरीके से सेट करूंगा ताकि आप इस समस्या का सामना न करें। उदाहरण के लिए आप content div के चारों ओर एक कंटेनर का उपयोग कर सकते हैं और उस पर पैडिंग लगा सकते हैं।

1
gitaarik 6 जून 2017, 15:02
क्या यह सही व्यवहार है (Chrome और IE में यह समस्या नहीं है)?
 – 
vbarbarosh
7 जून 2017, 13:37

मैं केवल एक फ्लेक्स आइटम के साथ flex-direction: row से जुड़ा हूं जिसमें margin: auto है। इसके अंदर मैंने अपना कंटेनर रखा। इस तरह यह बिना किसी समस्या के क्रोम, फ़ायरफ़ॉक्स, आईई और सफारी में काम करता है:

कोडपेन

.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>
0
vbarbarosh 7 जून 2017, 13:35