TEST: scrolling iframe content

by jorgeluis

HTML

<div class="page-container">

  <div class="header">header</div>
  
  <div class="content-wrapper">
  
    <div class="sidebar">Sidebar</div>
    
    <div class="content">
    
      <div>
        <div>
          <div>


            <div class="absolute">

              <div class="iframe-wrapper">
                <iframe class="frame" src="https://docs.jsfiddle.net" frameborder="0" allowfullscreen="">
                </iframe>
              </div>

            </div>


          </div>
        </div>
      </div>
    
    
    </div>
  
  </div>
  
</div>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
}

body, .page-container {
  display: flex;
  flex-direction: column;
}

.page-container {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
}
.header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  border-bottom: solid 1px #ddd;
  z-index: 100;
}
.content-wrapper {
  flex: 1 1 auto;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.sidebar {
  flex: 0 0 180px;
  overflow-y: auto;
  background: #111;
  color: #999;
  padding: 1rem;
}

.content {
  flex: 1 1 auto;
  padding: 25px;
  position: relative;
  overflow-y: auto;
}

.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.iframe-wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.frame {
  width: 100%;
  height: 100%;
}