1

I have 2 divs that are placed on top of each other. For purposes of alignment, I am using display: flex and flex: column on the div containing these two divs. However, the first div uses the "height 0 padding" trick for videos. The problem I'm having, is that when using flex: column and change the width of the screen, the height doesn't change (and I want the height to change so that it matches the ratio for the video). What ends up happening is that the div stays the same, and the video shrinks within it and it looks ugly because there is extra background.

Plunker: https://plnkr.co/edit/TaeF5f8VufJWPU3GRZPr?p=preview

(in short, I want it such that when I change the width of the browser, the red div's height gets smaller)

CSS

 /* Styles go here */

body {
 height: 100%;
}

.container {
  height: 80vh;
  display: flex;
  flex-flow: column;
}

.video {
  flex: none;
  height: 0;
  padding-bottom: 30%;
  background-color: red;
  width: 80%;
}

.next-content {
  flex: 1 0 auto;
  width: 80%;
  background-color: blue;
}

HTML: 

<body>
     <h1>Hello Plunker!</h1>
     <div class="container">
        <div class="video"></div>
        <div class="next-content"></div>
     </div>

pasquers
  • 772
  • 1
  • 8
  • 24
  • Using Firefox? It should work on Chrome. – Michael Benjamin Aug 31 '16 at 17:14
  • As a general rule, don't use percentage `padding` or `margin` in a flex container. http://stackoverflow.com/a/36783414/3597276 – Michael Benjamin Aug 31 '16 at 17:15
  • @Michael_B , is there a way then to do the video trick without the % padding? Or is it simply not possible for both to coexist – pasquers Aug 31 '16 at 17:36
  • I'm going to be trying to implement responsive videos to my websites this weekend. YouTube, Vimeo and HTML5 ` – Michael Benjamin Aug 31 '16 at 18:29
  • Much appreciated.... and good luck :) – pasquers Aug 31 '16 at 20:03
  • It's a real pain in the ass this responsive video embed thing. Honestly, I just went with `block` layout for the video containers, and used this *really cool* site: http://embedresponsively.com/ – Michael Benjamin Sep 03 '16 at 22:07
  • I have no connection with the link above. But after spending hours trying to find a workaround in FF in flex layout, and mobile devices, it took me just a few minutes to switch to `display: block` and add the styles. Problem solved here. Hope it helps you, too (although that's probably where you already were :-) Cheers! – Michael Benjamin Sep 03 '16 at 22:09
  • Haha yeah I already pretty much have those styles, and if you look at the styles they use they use the 0 height padding-bottom trick. I'm currently trying to avoid using flex, but i want to do the following http://stackoverflow.com/questions/38963223/extend-scrollable-div-to-match-bottom-of-another-div and am failing with my other options – pasquers Sep 08 '16 at 13:20
  • Just used `display: grid` for this purpose and work just fine 7 years later :) – Zac Aug 31 '23 at 07:54

0 Answers0