KPC
Kevin Powell - Communityā€¢3y ago
dys šŸ™

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
Mannixā€¢3y ago
give your video element height nad width of 100% šŸ™‚
dys šŸ™
dys šŸ™OPā€¢3y ago
I did that: https://codepen.io/u3b4/pen/gOZmKmw Things shifted a tiny bit, but definitely isn't all on one page.
Mannix
Mannixā€¢3y ago
megaByte
megaByteā€¢3y 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;
  }
}

Did you find this page helpful?