0

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)

enter image description here

-What I get-

(When I use height:100%)

enter image description here

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%;
    }
  }
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
cosmichero2025
  • 1,029
  • 4
  • 14
  • 37
  • 1
    Duplicate - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings – Paulie_D Apr 22 '18 at 08:21

1 Answers1

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.

  • 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 –  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