<div id="wide"></div>
<div id="tall"></div>

<main>
  <div id="contain_wide"></div>
  <div id="contain_tall"></div>
  
  <div class="text">click the box to toggle layout containment</div>
</main>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html {
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  overflow: hidden;
}
body {
  align-items: center;
  background-color: #1d1e22;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
}

main {
  align-items: center;
  background-color: #333;
  border: 3px solid rebeccapurple;
  display: flex;
  height: 50vh;
  width: 50vw;
}
main.contain {
  contain: layout;
}
main .text {
  flex-grow: 1;
  text-align: center;
}

#wide {
  background-color: green;
  height: 5px;
  left: 0;
  opacity: 0.25;
  position: absolute;
  top: 50%;
  width: 100%;
}
#tall {
  background-color: green;
  height: 100%;
  left: 50%;
  opacity: 0.25;
  position: absolute;
  top: 0;
  width: 5px;
}

#contain_wide {
  background-color: rebeccapurple;
  height: 5px;
  left: -30px;
  opacity: 0.5;
  position: absolute;
  top: 100px;
  width: calc(100% + 60px);
  z-index: 10;
}
#contain_tall {
  background-color: rebeccapurple;
  height: calc(100% + 60px);
  left: 100px;
  opacity: 0.5;
  position: absolute;
  top: -30px;
  width: 5px;
  z-index: 10;
}
View Compiled
const main = document.querySelector('main');

main.addEventListener('click', function () {
  this.classList.toggle('contain');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.