Kalimaha · September 16, 2020 04:11
diff --git a/index.html b/index.html
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script>
      function listen() {
        const ro = new ResizeObserver(entries => { for (let entry of entries) { entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px'; } });
        var elements = document.querySelectorAll('[adaptive]');
        for (var element, i = 0; element = elements[i]; i++) { ro.observe(element); }
      }
    </script>
    <style>
      .boxes  { display: flex; flex-wrap: wrap; width: 40vw; }
      .box    { height: 200px; flex-shrink: 1; flex-grow: 1; margin: 10px; box-sizing: border-box; border: 3px solid black; }
    </style>
  </head>
  <body onload="listen();">
    <div class="boxes">
      <div class="box"></div>
      <div class="box" adaptive></div>
    </div>
  </body>
 </html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<script>
	function listen() {
	const ro = new ResizeObserver(entries => { for (let entry of entries) { entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px'; } });
	var elements = document.querySelectorAll('[adaptive]');
	for (var element, i = 0; element = elements[i]; i++) { ro.observe(element); }
	}
	</script>
	<style>
	.boxes { display: flex; flex-wrap: wrap; width: 40vw; }
	.box { height: 200px; flex-shrink: 1; flex-grow: 1; margin: 10px; box-sizing: border-box; border: 3px solid black; }
	</style>
	</head>
	<body onload="listen();">
	<div class="boxes">
	<div class="box"></div>
	<div class="box" adaptive></div>
	</div>
	</body>
	</html>