JSFiddle - React, Tailwind, and code Playground

by NAS DAO

HTML

<div class="container">
  <div>If you can't resize big enough</div>
  <div class="container">
    <div>then zoom out to see the whole thing</div>
    <div>If you can't resize big enough</div>
    <div>then zoom out to see the whole thing</div>
    <div class="container">
      <div>If you can't resize big enough</div>
      <div>then zoom out to see the whole thing</div>
    </div>
  </div>
  <div>Thing threeThing threeThing three</div>
</div>
<br><br>
<div> If yo find this not working at the document load
click the JAVASCRIPT button and in the "LOAD TYPE" choose
no wrap in &lt;body&gt; option</div>

CSS

.container>* {
  border: ridge 2px black;
  display: inline-block;
  margin: 1px;
}
.container{
		white-space:nowrap;
}

JavaScript

collection = document.getElementsByClassName("container");
l = collection.length;

function handler() {
  for (let i = 0; i < l; i++)
    for (let j = 0, n = collection[i].children.length; j < n; j++) //	n	caching the length
      collection[i].children[j].style.display = "inline-block"; //	resetting elements to the 1st choice

  for (let i = 0; i < l; i++) {
    let p = collection[i]; // 	parent element
    let W0 = p.clientWidth; // width with no scroll bars
    let W1 = p.scrollWidth; // whole width
    if (W1 > W0) // constrained to display the scroll bar
      for (let j = 0, n = p.children.length; j < n; j++)
      p.children[j].style.display = "block";

  }
}
addEventListener("DOMContentLoaded", handler)
addEventListener("resize", handler)