Robię małą sekcję czatu / strumienia dlateren. Film ma style, dzięki którym zawsze zachowuje proporcje 16: 9. Czat obok niego chcę mieć taką samą wysokość jak wideo. Pole czatu ma właściwości przepełnienia, więc gdy czat przejdzie przez określoną wysokość, rozciągnie kontener nadrzędny, aby wyświetlić wszystkie elementy czatu w dziale div; którego należy się spodziewać. To, o co naprawdę pytam, to w jaki sposób sprawiłbym, że jedna kolumna kolumny flexbox sięgała tylko do pierwszej.
JSFIDDLE
https://jsfiddle.net/4bdrwh1f/14/
-Czego chcę-
(Pamiętaj, że nie mogę ustawić wysokości, ponieważ po zmianie rozmiaru ekranu zmienia się wysokość wideo, aby zachować proporcje)
-Co dostaję-
(Kiedy używam wzrostu: 100%)
Więc nie ma przepełnienia: /
HTML (ważne bity)
<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>
CSS
.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%;
}
}
}
Odpowiedzi:
0 dla odpowiedzi № 1Nie mogę naprawdę pracować z twoim kodem, ale gdy dodasz dwa elementy, ta sama wysokość jest możliwa display: flex
do elementu nadrzędnego. Jeśli to nie działa, sprawdź, czy wszystkie istotne elementy mają 100% height
Może możesz udostępnić link dla nas.