मैंने एक साधारण फ्लेक्सबॉक्स आधारित पृष्ठ बनाया है, जो Google क्रोम (संस्करण 44.0.2403.157) में ठीक से प्रस्तुत करता है, लेकिन सफारी में नहीं (संस्करण 8.0.2 (10600.2.5))। मैंने सभी प्रासंगिक उपसर्गों (मुझे लगता है) जोड़ा है और इंस्पेक्टर को देखने में बहुत समय लगा है लेकिन मुझे समस्या का कारण नहीं मिला है।सफारी फ्लेक्सबॉक्स में इसके तत्व ठीक से नहीं हैं
पृष्ठ में एक कंटेनर और दो फ्लेक्स पंक्तियां होती हैं। पहली फ्लेक्स पंक्ति (हेडर) में इसकी सामग्री फिट करने के लिए इसकी ऊंचाई खिंचाव होनी चाहिए। दूसरी फ्लेक्स पंक्ति (सामग्री) में हेडर ऊंचाई से कम ब्राउज़र की ऊंचाई की ऊंचाई होनी चाहिए, इस कंटेनर का ओवरफ़्लो स्क्रॉल करने के लिए सेट है। कोड कंटेनर को स्क्रॉल करने की आवश्यकता नहीं होने पर कोड ठीक काम करता है, लेकिन जैसे ही सामग्री कंटेनर में कोई ओवरफ़्लो होता है, हेडर पंक्ति में अब इसकी सामग्री नहीं होती है। ऐसा किसके कारण हो सकता है?
कोड:
<html>
<head>
<style>
.box {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6 */
display: flex; /* Modern browsers */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: column;
height: 100%;
width: 100%;
border: 2px solid;
}
.box .row {
flex: 0 1 30px;
border: 2px solid;
width: 100%;
}
.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
.box .row.content {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: scroll;
}
</style>
</head>
<body>
<div id="page-wrapper" style="height: 100%">
<div class="box">
<div class="row header">
<p>Header - The height of the header is based on the content</p>
<p>Header - The height of the header is based on the content</p>
</div> <!-- end of flex row header -->
<div class="row content">
<p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
</div> <!-- end of flex row content -->
</div> <!-- end of flex box -->
</div> <!-- end of page wrapper -->
</body>
</html>
सामग्री बॉक्स होने नहीं अतिप्रवाह के साथ ठीक से गाया:
सामग्री बॉक्स होने अतिप्रवाह के साथ गलत तरीके से गाया:
जैसा कि मुझे याद है, 'डिस्प्ले: फ्लेक्स' तत्वों के बच्चों से निपटने के दौरान सफारी को ऊंचाई मानों के साथ समस्याएं होती हैं। यदि माता-पिता एक प्रतिशत है तो बच्चों को घोषित हाइट्स के बाहर होने से उन्हें उसी प्रतिशत मूल्य का उत्तराधिकारी मिल सकता है। – TylerH
तो अगर मैं माता-पिता (बॉक्स) को पूरी पृष्ठ ऊंचाई को हमेशा भरना चाहता हूं, तो मुझे प्रतिशत का उपयोग किए बिना इसे कैसे सेट करना चाहिए? –
मैं सफारी पर परीक्षण नहीं कर सकता क्योंकि मैं विंडोज मशीन पर हूं, लेकिन आप व्यूपोर्ट (स्क्रीन) की ऊंचाई के बराबर तत्व बनाने के लिए '100vh' आज़मा सकते हैं। – TylerH