/ / Výška riadku flexboxu určuje jeden z jeho podradených prvkov - html, css, css3, flexbox

Rýchlosť radu flexboxu určuje jeden z jeho podradených elementov - html, css, css3, flexbox

Robím trochu rozhovor / prúd časť presite. Video má štýly, ktoré zabezpečia, že bude vždy mať pomer strán 16: 9. Rozhovor vedľa neho chcem mať rovnakú výšku ako video. Chatové okno má vlastnosti pretečenia, takže keď rozhovor prejde nad určitú výšku, roztiahne rodičovský kontajner tak, aby zobrazoval všetky položky rozhovoru v priečinku div; čo možno očakávať. To, čo sa skutočne pýtam, je, ako by som urobil jednu výšku stĺpca flexboxu len tak ďaleko ako prvá.

JSFIDDLE

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

-Čo chcem-

(Majte na pamäti, že nemôžem mať nastavenú výšku, pretože keď obrazovka mení veľkosť výšky videa, aby sa zachoval pomer strán)

tu zadajte popis obrázku

- Čo mám -

(Keď používam výšku: 100%)

tu zadajte popis obrázku

Takže žiadny prepad: /

HTML (dôležité 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%;
}
}
}

odpovede:

0 pre odpoveď č. 1

Nemôžem skutočne pracovať s vaším kódom, ale s dvomi prvkami je možné pridať rovnakú výšku display: flex k nadradenému prvku. Ak to nefunguje, skontrolujte, či všetky relevantné prvky majú 100% height

Možno môžete zdieľať odkaz pre nás.