एक फ्लेक्सबॉक्स पंक्ति की ऊंचाई होने के कारण उसके बच्चे तत्वों में से एक - एचटीएमएल, सीएसएस, सीएसएस 3, फ्लेक्सबॉक्स द्वारा निर्धारित किया जाना चाहिए

मैं एक के लिए थोड़ा चैट / स्ट्रीम अनुभाग बना रहा हूँसाइट। इस वीडियो में हमेशा 16: 9 पहलू अनुपात रखने के लिए शैलियों हैं। इसके बगल में चैट मैं वीडियो के समान ऊंचाई बनना चाहता हूं। चैट बॉक्स में ओवरफ्लो गुण होते हैं ताकि जब चैट एक निश्चित ऊंचाई पर हो जाए तो यह पैर में सभी चैट आइटम दिखाने के लिए पैरेंट कंटेनर को फैलाएगा; जिसकी अपेक्षा की जानी है। मैं वास्तव में क्या पूछ रहा हूं कि मैं एक फ्लेक्सबॉक्स कॉलम कैसे बनाऊंगा, केवल ऊंचाई पहले तक ही जाएगी।

JSFIDDLE

https://jsfiddle.net/4bdrwh1f/14/

-मैं क्या चाहता हूँ-

(ध्यान रखें कि मेरे पास सेट ऊंचाई नहीं हो सकती है क्योंकि जब स्क्रीन पहलू अनुपात को रखने के लिए वीडियो परिवर्तन की ऊंचाई का आकार बदलती है)

-जो मैं समझता हूं-

(जब मैं ऊंचाई का उपयोग करता हूं: 100%)

तो कोई अतिप्रवाह नहीं: /

एचटीएमएल (महत्वपूर्ण बिट्स)

  <div className="stream-page-top">
<div className="stream-page-main">

<div className="stream-wrapper">
<Video>
<source src={testVid} type="video/mp4"/>
</Video>
</div>

</div>

<div className="stream-page-aside">
<div className="stream-page-chat-wrapper">
<div className="chat-items">
/* This is where chat items are rendered */
</div>
</div>
</div>
</div>

सीएसएस

.stream-page-top {
@include flexbox();

.stream-page-main {
@include flex(5);
}

.stream-page-aside {
@include flex(2);
}

.stream-page-chat-wrapper {
@include flexbox();
@include flex-direction(column);
background-color: #021117;
width: 96%;
height: 100%;
margin: 0 auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;

.chat-items {
@include flexbox();
@include flex-direction(column-reverse);
overflow: auto;
height: 100%;
}
}
}

उत्तर:

मैं वास्तव में आपके कोड के साथ काम नहीं कर सकता, लेकिन जब आप जोड़ते हैं तो दो तत्व होने पर एक ही ऊंचाई संभव होती है display: flex मूल तत्व के लिए। यदि यह काम नहीं कर रहा है तो सभी प्रासंगिक तत्वों के पास जांच है 100% height

शायद आप हमारे लिए लिंक साझा कर सकते हैं।