कैसे क्रॉस अक्ष अतिप्रवाह के साथ flexbox बनाने के लिए एक ही ऊंचाई है?

Question 1

एक फ्लेक्स कंटेनर में दो कॉलम होते हैं, और पहला कॉलम किसी भी ऊंचाई के साथ हो सकता है, इसलिए मैं मैन्युअल रूप से कंटेनर की ऊंचाई सेट करता हूं और overflow: auto सेट करता हूं।

मुझे जो उम्मीद थी वह सही खाली डिव की ऊंचाई बाईं ओर sss बॉक्स के समान होगी। यह सच है कि उनकी ऊंचाई समान है, हालांकि यह बाएं sss बॉक्स की सिकुड़ी हुई ऊंचाई के कारण है। (कंटेनर 100px के समान ऊंचाई)

.c {
  display: flex;
  width: 400px;
  height: 100px;
  overflow: auto;
  flex-wrap: nowrap;
}

.empty {
  background-color: red;
  border: 1px solid;
  flex: 1;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

मैंने बाएं बॉक्स में margin-top: auto सेट किया है, अब ऊंचाई वापस सामान्य हो गई है (बिल्कुल sss की कुल ऊंचाई) जबकि खाली बॉक्स की ऊंचाई अभी भी वही है।

.c {
  display: flex;
  width: 400px;
  height: 100px;
  overflow: auto;
  flex-wrap: nowrap;
}

.empty {
  background-color: red;
  border: 1px solid;
  flex: 1;
}

.sss {
  margin-bottom: auto;
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

फिर मैंने flex-wrap: wrap सेट किया और यह काम कर गया, हालांकि मैं नहीं चाहता जब चौड़ाई पर्याप्त न हो तो उन्हें लपेटा जाए।

साथ ही, मैंने इन दो स्तंभों को एक तालिका में लपेटने का प्रयास किया और परिणाम flex-nowrap जैसा ही है।

.c {
  display: flex;
  width: 400px;
  height: 100px;
  overflow: auto;
  flex-wrap: wrap;
}

.empty {
  background-color: red;
  border: 1px solid;
  flex: 1;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

javascript html css flexbox

2

BAKE ZQ 2 जून 2020, 07:41

Answer

इसके बजाय सीएसएस ग्रिड का प्रयोग करें:

.c {
  display: grid;
  grid-template-columns:auto 1fr;
  width: 400px;
  height: 100px;
  overflow: auto;
}

.empty {
  background-color: red;
  border: 1px solid;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

1

Temani Afif 2 जून 2020, 08:24

Question 2

इसके बजाय सीएसएस ग्रिड का प्रयोग करें:

.c {
  display: grid;
  grid-template-columns:auto 1fr;
  width: 400px;
  height: 100px;
  overflow: auto;
}

.empty {
  background-color: red;
  border: 1px solid;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

1

Temani Afif 2 जून 2020, 08:24

कैसे क्रॉस अक्ष अतिप्रवाह के साथ flexbox बनाने के लिए एक ही ऊंचाई है?

1 उत्तर

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल