<h1>max()の使い方</h1>
<div id="container" class="container">
  <h2>コンテナー幅</h2>
  <p class="pixel">px<p>
</div>
h1{
  text-align: center;
}
.container {
  // width:max(50%,300px);
  width: 50%;
  min-width: 300px;
  margin: 30px auto;
  background-color: yellow;
  padding: 100px 0;
  text-align:center;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  gap: 1rem;
}
View Compiled 
const container = document.getElementById("container");
const displayWidth = () => {
  const w = container.clientWidth;
  const child = document.querySelector(".pixel");
  child.innerHTML = `${w}px`;
}
window.addEventListener("load", displayWidth);
window.addEventListener("resize", displayWidth);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.