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-height: 100svh on the main element, and then have the children resize to fit within a single screen. I'm using a columnar flexbox on main and a regular flexbox on .top. Currently the video is way too big. I've tried object-fit: contain, but that was no good. Can someone point me in the right direction?

4 Replies

Mannix•15mo ago

give your video element height nad width of 100% 🙂

dys 🐙OP•15mo ago

I did that: https://codepen.io/u3b4/pen/gOZmKmw Things shifted a tiny bit, but definitely isn't all on one page.

Mannix•15mo ago

https://codepen.io/MannixMD/pen/YzdZORb

megaByte•15mo ago

i would recommend using grid

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: content-box;
}

main {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  height: 100vh;
  justify-items: stretch;
}

.top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  width: 100%;

  & menu {
    & ul {
      padding: 0;
      margin-inline-end: 1rem;
    }

    & a {
      white-space: pre;
    }
  }

  & video {
    align-self: stretch;
  }
}

.bottom {
  & .bar {
    height: 5rem;

    background-color: green;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: content-box;
}

main {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  height: 100vh;
  justify-items: stretch;
}

.top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  width: 100%;

  & menu {
    & ul {
      padding: 0;
      margin-inline-end: 1rem;
    }

    & a {
      white-space: pre;
    }
  }

  & video {
    align-self: stretch;
  }
}

.bottom {
  & .bar {
    height: 5rem;

    background-color: green;
  }
}

Gaming

Programming

How to get an element to fit within its parent?