フレックスボックスの内部にブートストラップレスポンス埋め込みが消えますか？

Question

フレックスボックスを使用してアイテムを内側に整列させています（それ以外のものは動作していないようです）。ブートストラップレスポンス埋め込みは完全に消滅しているように見えますが、理由はわかりません。私は埋め込みにposition: relativeを使用することができません。ここでのコードは次のように二列の内側にあなたの "COL-MD-6" を挿入することができる...

Grid systemに見ると

.embed-responsive { 
 
    /*position: initial;*/ /* if set to initial or anything other than relative is re-appears but is no longer responsive */ 
 
} 
 

 
body { 
 
    background: grey; 
 
} 
 

 
div.title-area { 
 
    height: 350px; 
 
    width: 100%; 
 
    position: relative; 
 
    padding: 0 50px 0 50px; 
 
} 
 

 
div.title-area .video { 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3); 
 
} 
 

 
div.title-area > .col-md-6 { 
 
    min-height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
div.title-area h1 { 
 
    text-shadow: 0 3px 6px rgba(0, 0, 0, .35); 
 
    margin: 0; 
 
    text-transform: uppercase; 
 
    /*vertical-align: middle; 
 
    display: table-cell; 
 
    position: relative;*/ 
 
} 
 

 
.title-area h1 > small{ 
 
    color: white; 
 
    font-size: 15px; 
 
    text-indent: 5px; 
 
    display: block; 
 
    opacity: .6; 
 
    text-transform: uppercase; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="title-area"> 
 
    <div class="col-md-6"> 
 
     <h1>main title<small>subtitle</small></h1> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="embed-responsive embed-responsive-16by9 video"> 
 
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe> 
 
      </div> 
 
    </div> 
 
</div>

JSFiddle

Answer 1

ですsnipppet：

body { 
 
    background: grey; 
 
} 
 

 
div.title-area { 
 
    height: 350px; 
 
    width: 100%; 
 
    position: relative; 
 
    padding: 0 50px 0 50px; 
 
} 
 

 
div.title-area .video { 
 
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3); 
 
} 
 

 
div.title-area > .col-md-6 { 
 
    min-height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
div.title-area h1 { 
 
    text-shadow: 0 3px 6px rgba(0, 0, 0, .35); 
 
    margin: 0; 
 
    text-transform: uppercase; 
 
    /*vertical-align: middle; 
 
    display: table-cell; 
 
    position: relative;*/ 
 
} 
 

 
.title-area h1 > small{ 
 
    color: gray; 
 
    font-size: 15px; 
 
    text-indent: 5px; 
 
    display: block; 
 
    opacity: .6; 
 
    text-transform: uppercase; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="title-area"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <h1>main title<small>subtitle</small></h1> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div class="embed-responsive embed-responsive-16by9 video"> 
 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

embed-responsive divの周りにdivを追加して、divがflex div内を流れ、後者がembed-responsive-itemが必要とする相対位置を持つようにします。新しいdivに1のflex-growスタイルを与えてサイズを調整します。

HTML：

<div class="title-area"> 
    <div class="col-md-6"> 
    <h1>main title<small>subtitle</small></h1> 
    </div> 
    <div class="col-md-6"> 
    <div style="flex-grow: 1;"> 
     <div class="embed-responsive embed-responsive-16by9 video"> 
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe> 
     </div> 
    </div> 

    </div> 
</div> 

スタイル：

.embed-responsive { 
    // position: initial; 
    /* if set to initial or anything other than relative is re-appears but is no longer responsive */ 
} 

body { 
    background: grey; 
} 

div.title-area { 
    height: 350px; 
    width: 100%; 
    position: relative; 
    padding: 0 50px 0 50px; 
} 

div.title-area .video { 
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3); 
} 

div.title-area > .col-md-6 { 
    min-height: 100%; 
    display: flex; 
    align-items: center; 
} 

div.title-area h1 { 
    text-shadow: 0 3px 6px rgba(0, 0, 0, .35); 
    margin: 0; 
    text-transform: uppercase; 
    /*vertical-align: middle; 
    display: table-cell; 
    position: relative;*/ 
} 

.title-area h1 > small { 
    color: white; 
    font-size: 15px; 
    text-indent: 5px; 
    display: block; 
    opacity: .6; 
    text-transform: uppercase; 
} 

https://jsfiddle.net/rz5cmpz3/2/