Having a flexbox row's height be determined by one of its child elements

Question

I'm making a little chat/stream section for a site. The video has styles to make its always keep a 16:9 aspect ratio. The chat next to it I want to be the same height as the video. The chat box has overflow properties so that when the chat goes over a certain height it will stretch the parent container to show all the chat items in the div; which is to be expected. What I'm really asking is how I would make one flexbox column's height only go as far as the first one.

JSFIDDLE

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

-What I want-

(Keep in mind I can't have a set height because when the screen resizes the height of the video changes to keep the aspect ratio)

-What I get-

(When I use height:100%)

So no overflow :/

HTML (The important bits)

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

Duplicate - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Apr 22 '18 at 08:21

score 0 · Answer 1 · answered Apr 22 '18 at 01:38

0

I can't really work with your code, but having two elements the same height is possible when you add display: flex to the parent element. If that's not working check if all relevant elements have 100% height

Maybe you can share link for us.

answered Apr 22 '18 at 01:38

Phil

497
3
8
28

I can't use 100% height the chatbox div is a overflow:auto element which means it can have a lot chat items inside so that the user can scroll up. So if I were to give it 100% itt would show all the chat items. – cosmichero2025 Apr 22 '18 at 01:42
Also I'll make a quick jsfiddle – cosmichero2025 Apr 22 '18 at 01:44
Sorry it took so long here it is https://jsfiddle.net/4bdrwh1f/14/ ill update the quesiton – cosmichero2025 Apr 22 '18 at 02:02
While wrestling with this problem for a day I talked to my designer and we've just decided with another layout. I don't think your can do this with flexbox or css – cosmichero2025 May 02 '18 at 21:48
@cosmichero2025 you might be able to do it with javascript – Phil May 03 '18 at 05:46
Oh you can but it was kind of janky, didn't work well and I had a lot of other problems so instead dealing with that garbage we just changed stuff. – cosmichero2025 May 03 '18 at 13:01

Having a flexbox row's height be determined by one of its child elements

1 Answers1