フレックスボックスの高さをhtml、css、css3、flexboxのいずれかの子要素で決める

私は少しチャット/ストリームセクションを作っていますサイト。ビデオには常に16：9のアスペクト比を維持するスタイルがあります。その横のチャットは、ビデオと同じ高さになりたい。チャットボックスにはオーバーフロープロパティがあるため、チャットが特定の高さになると、親コンテナがストレッチされてdiv内のすべてのチャットアイテムが表示されます。これは期待される。私が本当に求めているのは、フレックスボックスの列の高さを最初の高さだけにする方法です。

JSFIDDLE

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

- 私が欲しいのは -

（画面の縦横比を維持するためにビデオの高さが変更されると、高さが設定されていることに注意してください）

- 私が得るもの -

（高さを100％使用すると）

したがってオーバーフローはありません：/

HTML（重要なビット）

  <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%;
}
}
}

回答：

私は本当にあなたのコードで作業することはできませんが、あなたが追加するときに同じ高さの2つの要素を持つことは可能です display: flex 親要素に追加します。それが機能していない場合、関連するすべての要素が 100% height

多分あなたは私たちのためのリンクを共有することができます。