How can I dynamically resize both the height and width of child components to ensure they never over-CodePudding

I'm working on a project with video chat functionality similar to Google Meet: Several people can be on a call at once, and I want all of the video ports on the screen to dynamically resize so that no matter what the size of the viewport is, each of the screens flexes accordingly so that the entire gallery alway stays within the boundaries of its container.

Here's a codesandbox mockup akin to what I currently have. There's a bit more going on when the actual videos are involved but this should at least illustrate the ask. You'll notice that when you resize the browser window left to right, the width scales dynamically, but once it gets narrow enough to where the content flexes into a column, the blue rectangle overflows from the container and the bottom half is cut off. Likewise when you resize from bottom to top, the blue rectangle will move up to touch the others, but none of them will shrink in size at all thus causing more overflow. What I'm looking to do is have them each resize so that no matter the size of the window, they'll always fit within the container. So for example when sizing from bottom to top, before the blue square hits the overflow breakpoint, I want all three of them to decrease in width and flex up into a single row.

https://codesandbox.io/s/suspicious-einstein-8x7o65?file=/src/styles.css:339-344

I've tried various combinations of height and width values on the child elements but I can't seem to find the magic rule. Any help would be appreciated. Thanks.

Edit: Here's an example of exactly what I'm looking to be able to do-- https://youtu.be/cf3kA5qs2dA

CodePudding user response：

maybe you can try that code?

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
  background-color: bisque;
  height: 75vh;
  width: 100%;
  overflow: hidden;
  border: 3px solid black;
}

.child {
  border-radius: 5px;
  margin: 0.25rem;
}

.blue {
  background-color: lightblue;
}

.red {
  background-color: crimson;
}

.green {
  background-color: lightgreen;
}

ofc values are arbitrary for me, you can always use aspect-ratio and such but i think it somewhat fits in a solution

CodePudding user response：

"So for example when sizing from bottom to top, before the blue square hits the overflow breakpoint, I want all three of them to decrease in width and flex up into a single row." Try adding:

@media screen and (max-height: 500px) {
  .child {
    flex-basis: 0vw;
  }
}