JSFiddle - React, Tailwind, and code Playground

css contain experiment: all contain types

by Travis Almand

HTML

<div id="panel">
  <select id="contain">
    <option>none</option>
    <option>strict</option>
    <option>content</option>
    <option>size</option>
    <option>layout</option>
    <option>style</option>
    <option>paint</option>
  </select>
</div>

<div class="example"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in dolor sem. Maecenas ante tellus, rutrum quis convallis gravida, euismod eu eros. Nulla lacinia, dolor non consequat lobortis, velit ligula viverra nisl, vitae aliquam augue nunc nec est. Sed eget erat vel sapien cursus sollicitudin ut eget felis. Maecenas suscipit nec nunc at euismod. Nam hendrerit mi odio, eget vulputate velit porta eget. In finibus dolor magna, vel vestibulum libero ultricies vehicula. Maecenas hendrerit odio ac nisl molestie tincidunt. Nunc ac turpis pulvinar quam vehicula semper.</div></div>

<div class="example contain"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in dolor sem. Maecenas ante tellus, rutrum quis convallis gravida, euismod eu eros. Nulla lacinia, dolor non consequat lobortis, velit ligula viverra nisl, vitae aliquam augue nunc nec est. Sed eget erat vel sapien cursus sollicitudin ut eget felis. Maecenas suscipit nec nunc at euismod. Nam hendrerit mi odio, eget vulputate velit porta eget. In finibus dolor magna, vel vestibulum libero ultricies vehicula. Maecenas hendrerit odio ac nisl molestie tincidunt. Nunc ac turpis pulvinar quam vehicula semper.</div></div>

<div id="height" class="example contain"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in dolor sem. Maecenas ante tellus, rutrum quis convallis gravida, euismod eu eros. Nulla lacinia, dolor non consequat lobortis, velit ligula viverra nisl, vitae aliquam augue nunc nec est. Sed eget erat vel sapien cursus sollicitudin ut eget felis. Maecenas suscipit nec nunc at euismod. Nam hendrerit mi odio, eget vulputate velit porta eget. In finibus dolor magna, vel vestibulum libero ultricies vehicula....

CSS

.example {
  margin: 10px;
  min-height: 50px;
  padding: 10px;
  border: 3px solid rebeccapurple;
}
.example:hover div {
  height: 200px;
}

[data-contain="none"] {
  contain: none;
}
[data-contain="strict"] {
  contain: strict;
}
[data-contain="content"] {
  contain: content;
}
[data-contain="size"] {
  contain: size;
}
[data-contain="layout"] {
  contain: layout;
}
[data-contain="style"] {
  contain: style;
}
[data-contain="paint"] {
  contain: paint;
}

JavaScript

let contains = document.querySelectorAll('.contain');
let containSelect = document.querySelector('#contain');

containSelect.addEventListener('change', (e) => {
  contains.forEach(contain => {
  	contain.dataset.contain = e.target.value;
  });
});