<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');
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.