On the page I use bootstrap3. The structure of some part is as follows:

<div class="row"> <div class="col-md-6"> <iframe src="..."></iframe> </div> <div class="col-md-6"> .... </div> </div>

That is, there are two columns in a row, in one of them there is a video from YouTube in a frame. It is necessary to make the same height of the columns of the row, i.e. so that when scaling the frame height coincides with the height of the contents of the second column. Google property display:flex; but it did not help me. I ask for help in solving this problem.

    2 answers 2

    Maybe this option will do.

     .row-table{ display: table; width: 100%; table-layout: fixed; } .col-table-cell{ display: table-cell; vertical-align: top; } .col-table-cell:nth-of-type(1){ background: #ccc; } .col-table-cell:nth-of-type(2){ background: #f7f7f7; } 
     <div class="row row-table"> <div class="col-md-6 col-table-cell"> <iframe src="..."></iframe> </div> <div class="col-md-6 col-table-cell"> .... </div> </div>

    Feeddle

     .row-flex { display: flex; flex-flow: row wrap; }

    In row you need to add row-flex .

    • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦