JSFiddle - React, Tailwind, and code Playground

by JuneDeng

HTML

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <div>
    <p>Sibling 3</p>
  </div>
</div>
<button>toogle bfc</button>

CSS

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}

p {
  margin: 10px 0;
  background-color: lightgreen;
}

.oh {
  overflow: hidden;  /* creates new block formatting context */
}

JavaScript

let btn =document.querySelector('button'),
newBfc = document.querySelector('.container>div');
btn.addEventListener('click', function () {
  newBfc.classList.toggle('oh');
}, false);