ओवरफ़्लो करने वाले फ्लेक्स आइटम के ऊपर स्क्रॉल नहीं कर सकते

Question

इसलिए, फ्लेक्सबॉक्स का उपयोग करके एक उपयोगी मोडल बनाने के प्रयास में, मैंने पाया कि एक ब्राउज़र समस्या क्या है और सोच रहा हूं कि क्या कोई ज्ञात फिक्स या वर्कअराउंड है - या इसे हल करने के तरीके पर विचार।

मैं जिस चीज को हल करने की कोशिश कर रहा हूं, उसके दो पहलू हैं। सबसे पहले, मोडल विंडो को लंबवत रूप से केंद्रित करना, जो उम्मीद के मुताबिक काम करता है। दूसरा मोडल विंडो को स्क्रॉल करने के लिए है - बाहरी रूप से, इसलिए पूरी मोडल विंडो स्क्रॉल करती है, इसके भीतर की सामग्री नहीं (ऐसा इसलिए है कि आपके पास ड्रॉपडाउन और अन्य UI तत्व हो सकते हैं जो मोडल की सीमा के बाहर विस्तारित हो सकते हैं - एक कस्टम तिथि पिकर की तरह, आदि)

हालाँकि, जब स्क्रॉलिंग बार के साथ वर्टिकल सेंटरिंग को जोड़ते हैं, तो मोडल का शीर्ष दुर्गम हो सकता है क्योंकि यह ओवरफ्लो होने लगता है। उपरोक्त उदाहरण में, आप ओवरफ्लो को मजबूर करने के लिए आकार बदल सकते हैं, और ऐसा करने में यह आपको मोडल के नीचे स्क्रॉल करने की अनुमति देता है, लेकिन शीर्ष पर नहीं (पहला पैराग्राफ कट जाता है)।

यहाँ उदाहरण कोड के लिंक है (अत्यधिक सरलीकृत)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

यह प्रभाव (वर्तमान) फ़ायरफ़ॉक्स, सफ़ारी, क्रोम और ओपेरा .. यह IE10 में दिलचस्प ढंग से सही ढंग से व्यवहार करता है यदि आप IE10 में पूर्वनिर्धारित सीएसएस में टिप्पणी करते हैं - मैंने अभी तक IE11 में परीक्षण को परेशान नहीं किया था, लेकिन मान लें कि IE10 से मेल खाता है ।

कोई भी विचार अच्छा होगा। ज्ञात समस्याओं के लिंक, या इस व्यवहार के पीछे तर्क भी उपयोगी होंगे।

Answer 1

समस्या

Flexbox बहुत आसान केंद्रित बनाता है।

बस align-items: centerऔर justify-content: centerफ्लेक्स कंटेनर में लागू करने से, आपका फ्लेक्स आइटम लंबवत और क्षैतिज रूप से केंद्रित हो जाएगा।

हालांकि, इस विधि के साथ एक समस्या है जब फ्लेक्स आइटम फ्लेक्स कंटेनर से बड़ा है।

जैसा कि सवाल में कहा गया है, जब फ्लेक्स आइटम कंटेनर को ओवरफ्लो करता है तो शीर्ष दुर्गम हो जाता है।

क्षैतिज अतिप्रवाह के लिए, बाएं खंड अप्राप्य (या सही खंड, RTL भाषाओं में) हो जाता है।

यहाँ एक LTR कंटेनर justify-content: centerऔर तीन फ्लेक्स आइटम के साथ एक उदाहरण दिया गया है :

इस व्यवहार के स्पष्टीकरण के लिए इस उत्तर के नीचे देखें।

---

समाधान # 1

इस समस्या को ठीक करने के लिए फ्लेक्सबॉक्स ऑटो मार्जिन का उपयोग करें , के बजाय justify-content।

autoमार्जिन के साथ , एक अतिप्रवाहित फ्लेक्स आइटम खड़ी और क्षैतिज रूप से इसके किसी भी हिस्से तक पहुंच खोए बिना केंद्रित हो सकता है।

फ्लेक्स कंटेनर पर इस कोड के बजाय:

#flex-container {
    align-items: center;
    justify-content: center;
}

फ्लेक्स आइटम पर इस कोड का उपयोग करें:

.flex-item {
    margin: auto;
}

संशोधित डेमो

---

समाधान # 2 (अभी तक अधिकांश ब्राउज़रों में लागू नहीं)

safeअपने कीवर्ड संरेखण नियम में मान को इस तरह जोड़ें :

justify-content: safe center

या

align-self: safe center

से सीएसएस बॉक्स संरेखण मॉड्यूल विनिर्देश :

4.4। ओवरफ्लो संरेखण: safeऔर unsafeकीवर्ड और स्क्रॉल सुरक्षित सीमा

जब [फ्लेक्स आइटम] [फ्लेक्स कंटेनर] से बड़ा होता है, तो यह ओवरफ्लो हो जाएगा। कुछ संरेखण मोड, यदि इस स्थिति में सम्मानित किए जाते हैं, तो डेटा हानि हो सकती है: उदाहरण के लिए, यदि साइडबार की सामग्री केंद्रित है, तो जब वे ओवरफ़्लो होते हैं, तो वे व्यूपोर्ट के स्टार्ट एज से अपने बक्से का हिस्सा भेज सकते हैं, जिसे स्क्रॉल नहीं किया जा सकता है ।

इस स्थिति को नियंत्रित करने के लिए, एक अतिप्रवाह संरेखण मोड स्पष्ट रूप से निर्दिष्ट किया जा सकता है। Unsafeसंरेखण निर्दिष्ट संरेखण मोड को अतिप्रवाह स्थितियों में सम्मानित करता है, भले ही यह डेटा हानि का कारण हो, जबकि safeसंरेखण डेटा हानि से बचने के प्रयास में संरेखण मोड को अतिप्रवाह स्थितियों में बदलता है।

डिफ़ॉल्ट व्यवहार को स्क्रॉल करने योग्य क्षेत्र के भीतर संरेखण विषय को शामिल करना है, हालांकि लेखन के समय यह सुरक्षा सुविधा अभी तक लागू नहीं हुई है।

safe

यदि [फ्लेक्स आइटम] का आकार [फ्लेक्स कंटेनर] से अधिक हो जाता है, तो [फ्लेक्स आइटम] को एलाइन किया जाता है जैसे कि संरेखण मोड [ flex-start]।

unsafe

[फ्लेक्स आइटम] और [फ्लेक्स कंटेनर] के सापेक्ष आकार के बावजूद, दिए गए संरेखण मूल्य को सम्मानित किया जाता है।

नोट: बॉक्स संरेखण मॉड्यूल कई बॉक्स लेआउट मॉडल भर में उपयोग के लिए है, न कि केवल फ्लेक्स। तो ऊपर दिए गए विशेष अंश में, कोष्ठक में शब्द वास्तव में "संरेखण विषय", "संरेखण कंटेनर" और " start" कहते हैं। मैंने इस विशेष समस्या पर ध्यान केंद्रित रखने के लिए फ्लेक्स-विशिष्ट शब्दों का उपयोग किया।

---

MDN से स्क्रॉल सीमा के लिए स्पष्टीकरण:

फ्लेक्स आइटम विचार

फ्लेक्सबॉक्स के संरेखण गुण सीएसएस में अन्य केंद्रित तरीकों के विपरीत, "सच" केंद्रित करते हैं। इसका मतलब है कि फ्लेक्स आइटम केंद्रित रहेंगे, भले ही वे फ्लेक्स कंटेनर को ओवरफ्लो करें।

यह कभी-कभी समस्याग्रस्त हो सकता है, हालांकि, यदि वे पृष्ठ के ऊपरी किनारे, या बाएं किनारे पर अतीत में बहते हैं [...], तो आप उस क्षेत्र में स्क्रॉल नहीं कर सकते, भले ही वहां सामग्री हो!

भविष्य के रिलीज में, संरेखण गुणों को "सुरक्षित" विकल्प के रूप में अच्छी तरह से बढ़ाया जाएगा।

अभी के लिए, यदि यह एक चिंता का विषय है, तो आप इसके बजाय मार्जिन प्राप्त करने के लिए उपयोग कर सकते हैं, क्योंकि वे "सुरक्षित" तरीके से जवाब देंगे और यदि वे अतिप्रवाह करते हैं, तो केंद्र को रोक दें।

align-गुणों का उपयोग करने के बजाय , केवल autoउन लचीली वस्तुओं पर मार्जिन डालें जिन्हें आप केंद्र में लाना चाहते हैं।

justify-गुणों के बजाय , फ्लेक्स कंटेनर में पहले और आखिरी फ्लेक्स आइटम के बाहरी किनारों पर ऑटो मार्जिन डालें।

autoमार्जिन "फ्लेक्स" और बचे हुए अंतरिक्ष समझेंगे, फ्लेक्स आइटम केंद्रित जब वहाँ अंतरिक्ष बचे हुए है, और जब नहीं सामान्य संरेखण का उपयोग करने जा।

हालाँकि, यदि आप justify-contentमल्टी-लाइन फ्लेक्सबॉक्स में मार्जिन-आधारित सेंटरिंग के साथ बदलने की कोशिश कर रहे हैं, तो आप शायद भाग्य से बाहर हैं, क्योंकि आपको प्रत्येक लाइन पर पहले और आखिरी फ्लेक्स आइटम पर मार्जिन लगाने की आवश्यकता है। जब तक आप समय से पहले यह अनुमान नहीं लगा सकते हैं कि कौन सी वस्तु किस लाइन पर समाप्त होगी, आप justify-contentसंपत्ति को बदलने के लिए मुख्य अक्ष में मज़बूती से मार्जिन-आधारित सेंटरिंग का उपयोग नहीं कर सकते हैं।

Comments

हां, यह एक बेहतर उपाय है, और अतिरिक्त मूल्यवान अंतर्दृष्टि प्रदान करने के लिए धन्यवाद।

— jejacks0n

यह ध्यान दिया जाना चाहिए कि IE11 में काम नहीं करता है। पृष्ठभूमि को काट दिया जाएगा।

— डैनियल

@ डैनियल, मैंने अभी IE11 में कोड का परीक्षण किया है। कुछ भी दुर्गम नहीं है। वास्तव में, प्रश्न में वर्णित समस्या IE11 में भी मौजूद नहीं है। आप केवल IE11 में हो रहे पाठ अतिप्रवाह का उल्लेख कर सकते हैं। यह एक और सवाल के लिए एक और मुद्दा है।

— माइकल बेंजामिन

IE11 में समस्या को ठीक करने के लिए: align-items: flex-startफ्लेक्स कंटेनर में जोड़ें और margin: autoफ्लेक्स आइटम के लिए रखें ।

— यूजीन फिदेलिन

फ्लेक्स-दिशा का उपयोग करते समय यह मेरे लिए काम नहीं करता है: कॉलम;

— स्टीफन

Answer 2

खैर, जैसा कि मर्फी के कानून में होता है, इस सवाल को पोस्ट करने के बाद मैंने जो रीडिंग की, उससे कुछ नतीजे निकले- पूरी तरह से हल नहीं हुए, लेकिन फिर भी कुछ हद तक उपयोगी हैं।

मैं पोस्ट करने से पहले थोड़ी ऊंचाई के आसपास खेला गया था, लेकिन आंतरिक रूप से कठोर बाधाओं के बारे में पता नहीं था जो कल्पना के लिए काफी नए हैं।

http://caniuse.com/#feat=intrinsic-width

min-height: min-contentफ्लेक्सबॉक्स क्षेत्र में जोड़ने से क्रोम में समस्या हल हो जाती है, और विक्रेता के साथ उपसर्ग ओपेरा और सफारी को भी ठीक करता है, हालांकि फ़ायरफ़ॉक्स अनसुलझे रहता है।

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

अभी भी फ़ायरफ़ॉक्स और अन्य संभावित समाधानों पर विचारों की तलाश है।

Comments

मैं सिर्फ यह कहना चाहता था कि यह फ़ायरफ़ॉक्स में मेरे लिए पहले से ही काम कर रहा है। तो मिन-कंटेंट वाला घोल एकदम सही था।

— पुद्गेरेयेम

@pudgereyem मुझे लगता है कि उन्होंने इसे तब लागू किया था। मेरे साथ काम करने से अन्य समाधान margin: autoरुक जाता flex-basisहै जबकि इस उत्तर ने दोनों मुद्दों को हल कर दिया।

— मार्टिन डॉसन

एक शानदार समाधान वास्तव में। मैं एज या IE के बारे में परवाह नहीं है, तो यह मेरे लिए पूरी तरह से काम करता है!

— ओहगोद्वि

Answer 3

मैं सिर्फ 3 कंटेनरों से इसे खींचने में कामयाब रहा। चाल फ्लेक्सबॉक्स कंटेनर को स्क्रॉलिंग को नियंत्रित करने वाले कंटेनर से अलग करना है। अंत में, सब कुछ एक रूट कंटेनर में डाल दें ताकि यह सब हो सके। यहाँ प्रभाव बनाने के लिए आवश्यक शैलियाँ हैं:

सीएसएस:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML:

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

मैंने यहां एक डेमो बनाया है: https://jsfiddle.net/r5jxtgba/14/

Comments

एक स्क्रॉल-कंटेनर युक्तियों के लिए thx, मैंने अपने ***** स्क्रॉल सामग्री को ठीक करने के लिए दो दिनों से खोज की !!!

— आर्टसक्स

याद है, न दे flex: 1 1 autoकरने के लिए scroll-container। मैं आदत से ऐसा कर रहा था और समस्या में आ गया।

— अमीरहोसिन

Jsfiddle दर्शाता है कि जब आप कंटेनर के अंदर अधिक सामग्री जोड़ते हैं तो यह काम नहीं करता है।

— bplittle

Answer 4

मुझे लगता है कि मुझे एक समाधान मिला। यह बहुत सारे पाठ और थोड़े पाठ के साथ काम करता है । आपको किसी भी चीज़ की चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है, और इसे IE8 में काम करना चाहिए ।

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Comments

यह विरासत ब्राउज़रों के लिए सबसे अच्छा समाधान है। आपका बहुत बहुत धन्यवाद!

— डैनियल

वाह, यह बहुत सारे लपेटे हैं।

— नाथन आर्थर

वाह, मैंने इसे हासिल करने के लिए घंटों कोशिश की है। (जब आप एनिमेशन जोड़ते हैं तो अन्य सभी तरीके मोबाइल क्रोम में विफल हो जाते हैं। ऐसा नहीं होता है) बहुत बहुत धन्यवाद!

— झूठी

Answer 5

एमडीएन के अनुसार, safeमूल्य अब जैसे गुणों को प्रदान किया जा सकता है align-itemsऔर justify-content। यह इस प्रकार वर्णित है:

यदि आइटम का आकार संरेखण कंटेनर को ओवरफ्लो करता है, तो आइटम को संरेखित किया जाता है जैसे कि संरेखण मोड था start।

इसलिए, इसका उपयोग निम्नानुसार किया जा सकता है।

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

हालाँकि, यह स्पष्ट नहीं है कि इसका कितना ब्राउज़र समर्थन है, मुझे इसके उपयोग के कोई उदाहरण नहीं मिले, और मैं स्वयं इसके साथ कुछ समस्याएँ रखता रहा हूं। इसे और अधिक ध्यान आकर्षित करने के लिए यहाँ उल्लेख करना।

Comments

7 जून 2018 और अभी भी क्रोम में लागू नहीं किया गया है।

— अमीरहोसिन

एमडीएन (वर्तमान) एमडीएन पृष्ठों के अनुसार, "सुरक्षित" और "असुरक्षित" अभी भी फ़ायरफ़ॉक्स हैं केवल इस बिंदु पर (अच्छी तरह से, सफारी और अधिकांश मोबाइल ब्राउज़रों का अज्ञात समर्थन है - मैं इसे सुरक्षित खेलूंगा और कोई समर्थन नहीं मानूंगा)।

— JaMiT

एमडीएन फ़ायरफ़ॉक्स समर्थन की रिपोर्ट करता है, लेकिन जब मैंने फ़ायरफ़ॉक्स में इसका परीक्षण किया, तो यह काम नहीं किया। jsbin.com/pimoqof/1/edit?html,css,output

— ओलिवर जोसेफ ऐश

जून 2020 और अधिकांश ब्राउज़रों में नहीं, कैनीयूज़ के अनुसार

— den232

Answer 6

मैं अतिरिक्त कंटेनर का उपयोग करके इसे करने में भी कामयाब रहा

एचटीएमएल

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>  
</div>

सीएसएस

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

in jsfiddle> https://jsfiddle.net/Nash171/cpf4weq5/

परिवर्तन। स्थिर चौड़ाई / ऊंचाई मान और देखें

Answer 7

टेबल फॉलबैक IE8-9 के साथ 2 कंटेनर फ्लेक्स विधि, IE10,11 में फ्लेक्स काम करता है। संपादित करें: न्यूनतम सामग्री, अतिरिक्त विरासत के समर्थन में ऊर्ध्वाधर केंद्र सुनिश्चित करने के लिए संपादित किया गया।

जैसा कि माइकल ने उत्तर दिया था कि यह मुद्दा व्यूपोर्ट के आकार से उंचाई से उपजा है, जो बच्चों को ओवरफ्लो करने का कारण बनता है। https://stackoverflow.com/a/33455342/3500688

कुछ और सरल और पॉपअप कंटेनर (सामग्री) के भीतर लेआउट को बनाए रखने के लिए फ्लेक्स का उपयोग करें:

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
		<!--[if lt IE 10]>
<style>
	  #popup {
			display: table;
			width:100%;
		}
		.iewrapper {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<![endif]-->

<div id="popup">
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
    <div class="container">
        <p class="p3">Test</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>