Html 具有flexbox行'；s的高度由其子元素之一确定

我正在为一个网站制作一个聊天/流部分。视频的样式使其始终保持16:9的纵横比。旁边的聊天我想和视频一样高。聊天框具有溢出属性，因此当聊天超过一定高度时，它将拉伸父容器以显示div中的所有聊天项目；这是意料之中的。我真正想问的是如何使一根flexbox柱的高度仅与第一根柱的高度相同

JSFIDLE

-我想要的-

（请记住，我不能设置高度，因为当屏幕调整大小时，视频的高度会改变以保持纵横比）

-我得到了什么-

（当我使用高度时：100%）

因此，没有溢出：/

HTML（重要的部分）

---

我不能真正使用您的代码，但是当您向父元素添加

display:flex

时，两个元素的高度相同是可能的。如果不起作用，检查所有相关元件是否具有

100%的高度

---

也许您可以为我们共享链接。

我不能使用100%高度聊天盒div是一个overflow:auto元素，这意味着它可以包含很多聊天项目，以便用户可以向上滚动。因此，如果我给它100%的itt会显示所有的聊天项目。另外，我会做一个快速的JSFIDDLE抱歉，在这里花了这么长时间，我会更新问题。在解决这个问题的一天中，我和我的设计师谈过，我们刚刚决定使用另一个布局。我不认为你能用flexbox做这件事css@cosmichero2025您可能可以使用javascriptDuplicate来实现这一点-

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