JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
  <div id="main">
      <div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
  </div>
</div>

CSS

#page {
  overflow: hidden;
  min-width: 200px; /*same as #mains width*/
}

#main{
  position: relative;
  height: 500px;
  width: 200px;
  margin: 0 auto;
  background-color: lightgreen;
}


#extended-out { 
  height: 200px;
  margin: 0 -100px;
  background: indianred;
  border: 1px solid red;
}

#extended-out img {
    width: 100%; height: 100%;
}