/ / O wysokości rzędu flexbox decyduje jeden z jego elementów potomnych - html, css, css3, flexbox

O wysokości rzędu flexbox decyduje jeden z jego elementów podrzędnych - html, css, css3, flexbox

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)

wprowadź opis obrazu tutaj

-Co dostaję-

(Kiedy używam wzrostu: 100%)

wprowadź opis obrazu tutaj

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 № 1

Nie 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.