I couldn't think of a good way to word the title. Let me start with an image for a layout I've been trying to get for a week. It's for a video meeting app. I could use some help figuring out how this can come together.

So the first thing is the two sidebars with the arrows. Those need to expand and collapse. I basically pulled from W3 to get those to work standalone.

Then I created a grid with two flex rows. Something like this:

.Container {
  display: grid;
  grid-template-rows: 1fr auto;
}

// Chat, Video, etc.
.MeetingContainer {
  display flex;
}

.SideMenu {
  flex-shrink: 1;
}

.MainVideo {
  flex-grow: 1;
}

.SettingsMenu {
  display: flex;
  justify-content: space-between;
}

I also previously tried putting everything to a grid/subgrid setup. Mostly just used this generator. I don't have any issues with the settings menu, pretty easy to break it up on media queries.

Here's the problem I'm running into. Keeping the video (it's HTML5 video tag) in the middle responsive. And keeping the heights of the items that have overflow contained without blowing out the whole layout. Basically, I'm trying to make this entire container visible at any screen size.

For the video, I thought a simple height: 100%, width: 100%, object-fit: cover would work. But height doesn't shrink. Something like this in my current playground/mock-up:

Just above this text is where the video is. Notice how the background-color shrinks behind the "buttons" and they get trapped under the video.

As for the overflow items, I don't know how to set a height for them without it being a static px. For example, the idea is to make 'Chat Messages' and 'File Share' 50% of the grid row. And overflow: auto; relative to that height. Which doesn't work out very well even with media queries.

Can this be done? I'd prefer to continue on the path I'm on, but if it can't work, it can't work. Or should I rework it to be more realistic? Popups? :( Maybe create iframes? I'm not sure that'd help tbh. I'm running out of ideas.

I am using react here with CSS modules, so I can be programatic. But short of a stack of event listeners to set height on every element, I'm not sure how to make clean use of that.