Question

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>

column flex with height 0 padding trick

0 个答案: