ipid · May 18, 2025 17:26
diff --git a/CSS Hard Problems - height: auto＆Scroll items.html b/CSS Hard Problems - height: auto＆Scroll items.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>CSS Hard Problems - height: auto & Scroll items</title>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"
    />
    <style>
      .modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.3);

        display: flex;
        justify-content: center;
        align-items: center;

        .wrapper {
          background: white;
          margin: 0 auto;
          width: 400px;
          max-height: calc(100% - 200px);
          display: flex;

          .content {
            height: 100%;
            display: flex;
            flex-direction: column;

            header {
              flex: 0 0 auto;
              padding: 10px 20px;
              display: flex;
              flex-direction: column;
            }

            main {
              flex: 1 1 auto; /* or flex: 1 0 0 */
              overflow: hidden scroll;
              padding: 10px 20px;
              display: flex;
              flex-direction: column;
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <div class="modal">
      <div class="wrapper">
        <div class="content">
          <header>
            <h2>Modal header</h2>

            <input
              type="number"
              id="selectCount"
              placeholder="Number of selects"
              style="
                margin-bottom: 10px;
                width: calc(100% - 10px);
                padding: 5px;
              "
            />
          </header>

          <main></main>
        </div>
      </div>
    </div>

    <script>
      const elemSelectCount = document.getElementById("selectCount");
      const elemMain = document.querySelector("main");

      elemSelectCount.oninput = function updateSelects() {
        const count = Number(elemSelectCount.value) || 0;
        const innerHtmls = [];

        for (let i = 1; i <= count; i++) {
          innerHtmls.push(`
            <h3>Select ${i}</h3>
            <p>
              <select>
                <option>Option</option>
              </select>
            </p>
          `);
        }

        elemMain.innerHTML = innerHtmls.join("");
      };
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>CSS Hard Problems - height: auto & Scroll items</title>
	<meta charset="UTF-8" />
	<meta
	name="viewport"
	content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"
	/>
	<style>
	.modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.3);

	display: flex;
	justify-content: center;
	align-items: center;

	.wrapper {
	background: white;
	margin: 0 auto;
	width: 400px;
	max-height: calc(100% - 200px);
	display: flex;

	.content {
	height: 100%;
	display: flex;
	flex-direction: column;

	header {
	flex: 0 0 auto;
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
	}

	main {
	flex: 1 1 auto; /* or flex: 1 0 0 */
	overflow: hidden scroll;
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
	}
	}
	}
	}
	</style>
	</head>
	<body>
	<h1>Hello, world!</h1>

	<div class="modal">
	<div class="wrapper">
	<div class="content">
	<header>
	<h2>Modal header</h2>

	<input
	type="number"
	id="selectCount"
	placeholder="Number of selects"
	style="
	margin-bottom: 10px;
	width: calc(100% - 10px);
	padding: 5px;
	"
	/>
	</header>

	<main></main>
	</div>
	</div>
	</div>

	<script>
	const elemSelectCount = document.getElementById("selectCount");
	const elemMain = document.querySelector("main");

	elemSelectCount.oninput = function updateSelects() {
	const count = Number(elemSelectCount.value) \|\| 0;
	const innerHtmls = [];

	for (let i = 1; i <= count; i++) {
	innerHtmls.push(`
	<h3>Select ${i}</h3>
	<p>
	<select>
	<option>Option</option>
	</select>
	</p>
	`);
	}

	elemMain.innerHTML = innerHtmls.join("");
	};
	</script>
	</body>
	</html>