html क्रोम और सफारी फ्लेक्स ऊंचाई 100% विफलता



css css3 (1)

flex-direction: column जुड़ा हाल के सफारी रेंडरिंग बग जैसा लगता है flex-direction: column । आप दो height: 100% डाल रहे हैं height: 100% एक ही स्थान में height: 100% तत्व, और वे दोनों एक ही स्थान में फिटिंग के बजाय 100% ऊंचाई और स्टैकिंग पर प्रतिपादन कर रहे हैं।

यहां दो समाधान दिए गए हैं:

  1. height: 100% बदलें height: 100% height: 50% तो दोनों तत्व उनके माता-पिता की आधी ऊंचाई या ...

  2. height विशेषता को निकालें और flex: 1 जोड़ें flex: 1 इसलिए दोनों बच्चे बड़े हो जाते हैं जितना वे माता-पिता के स्थान में कर सकते हैं, और 50/50 स्वचालित रूप से खुद को विभाजित कर सकते हैं।

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

*::-webkit-scrollbar {
  width: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

body {
  border: 5px solid red;
}

.d {
  height: 50%;
  border: 5px solid green;
}
<div class="d"></div>
<div class="d"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

*::-webkit-scrollbar {
  width: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

body {
  border: 5px solid red;
}

.d {
  flex: 1;
  border: 5px solid green;
}
<div class="d"></div>
<div class="d"></div>

क्रोम सामान्य है, सफ़ारी विफलता। यह कैसे संगत हो सकता है? height:100%;

मुझे क्रोम रखने और सफारी का उपयोग करने की आवश्यकता है मेरा सफ़ारी संस्करण 10.1.2 (12603.3.8)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

* ::-webkit-scrollbar {
  width: 0;
}

html, body {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

body {
  border: 5px solid red;
}

.d {
  height: 100%;
  border: 5px solid green;
}
<div class="d"></div>
<div class="d"></div>





flexbox