html - 让 flexbox 行的高度由其子元素之一确定

Question

我正在为网站制作一个小的聊天/流部分。该视频具有使其始终保持 16:9 纵横比的样式。旁边的聊天我要和视频一样高。聊天框有 overflow 属性，当聊天超过一定高度时，它会拉伸(stretch)父容器以显示 div 中的所有聊天项；这是可以预料的。我真正想问的是如何使一个 flexbox 列的高度只达到第一个列的高度。

JSFIDDLE

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

-我想要的-

(请记住，我无法设置高度，因为当屏幕调整大小时，视频的高度会发生变化以保持纵横比)

-我得到的-

(当我使用 height: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%;
    }
  }
}

Answer 1

我真的无法使用您的代码，但是当您将 display: flex 添加到父元素时，可以使两个元素具有相同的高度。如果这不起作用，请检查所有相关元素是否具有 100% 高度

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