title: Jumbotron div's overflowing
body: <p>I'v been having a hard time trying to fix this. I want to display two iframes at full browser width and heigth. This is inside .jumbotron from Boostrap 3. 
  The two iframes are a video and a chat ( I want to "mimic" a theathre mode ). </p>
  
  <p>I have finally been able to align the stuff in the divs etc. But now I am facing this problem, the iframe and chat div's are overflowing the jumbotron.</p>
  
  <p>If i set overflow:hidden to .jumbotron the video and chat are cut down, this blocks the video controls and chat send buttons.
  Basically I need the iframes to adjust to the jumbotron and everything will be ok (100% width and heigth).</p>
  
  <p>Should note that the iframes are both from a twitch.tv channel.</p>
  
  <p>Thank you for your patience!</p>
  
  <p>Heres the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-weight: 300;
  }
  
  .jumbotron {
    display: flex;
    align-items: center;
    background-size: cover;
    color: blue;
    text-shadow: 0.25px 0.25px 0.25px #000000;
    padding: 0px;
    padding-left: 0px;
    padding-right: 0px;
    height: 100vh;
    
  }
  .twitchWrapper {
   width: 100vw;
  }
  
  .twitchVideo {
   width: calc(100% - 300px);
   height: 100%;
  }
  
  .twitchChat {
   width: 300px; 
  }
  
  .nopadding {
     padding: 0 !important;
     margin: 0 !important;
  }
  
  .nomargin {
   margin: 0 !important;
   padding: 0 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="twitch.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;section class="jumbotron"&gt;
  &lt;div class="container nomargin"&gt;
  &lt;div class="row twitchWrapper"&gt;
  &lt;div class="twitchVideo embed-responsive embed-responsive-16by9 col-lg-9"&gt;
  &lt;iframe class="embed-responsive-item video" src="https://player.twitch.tv/?channel=lirik" frameborder="0" scrolling="no" &gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div class="twitchChat embed-responsive embed-responsive-16by9 col-lg-3"&gt;
  &lt;iframe class="embed-responsive-item chat" src="https://www.twitch.tv/lirik/chat?popout=" frameborder="0" scrolling="no" &gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I add overflow: hidden; to .jumbotron cant propperly control the stuff. <a href="https://snag.gy/UlewLH.jpg" rel="nofollow">https://snag.gy/UlewLH.jpg</a></p>