4 replies

How to get an element to fit within its parent?

I'm working on a simple layout: https://codepen.io/u3b4/pen/gOZmKmw

The basic structure is something like:

<main>
  <section class="top">
    <menu>…</menu>
    <video/>
  </section>
  <section class="bottom">
    <div class="bar"/>
  </section>
</main>

<main>
  <section class="top">
    <menu>…</menu>
    <video/>
  </section>
  <section class="bottom">
    <div class="bar"/>
  </section>
</main>

What I want to do is put a

max-width: 100svw

max-width: 100svw

max-height: 100svh

max-height: 100svh

on the

main

main

element, and then have the children resize to fit within a single screen.

I'm using a columnar flexbox on

main

main

and a regular flexbox on

.top

.top

.

Currently the

video

video

is way too big. I've tried

object-fit: contain

object-fit: contain

, but that was no good.

Can someone point me in the right direction?