Element size

Width & Height

syntax

width: value; height: value;
min-width | max-width | min-height | max-height

example

.container {
  width: 100%;
  max-width: 1200px;
}

.sidebar {
  width: 280px;
  min-height: 100vh;
}

.avatar {
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
}

Note Avoid setting fixed heights on text containers since content length varies. Use min-height instead. The aspect-ratio property maintains proportions without needing both width and height.

REReact

Callback Refs

RE · useRef

syntax

<element ref={(node) => {
  // node is the DOM element or null on unmount
}} />

example

function MeasuredBox() {
  const [height, setHeight] = useState(0);

  const measureRef = (node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  };

  return (
    <div>
      <div ref={measureRef} style={{ padding: '20px' }}>
        <p>This box has dynamic content.</p>
        <p>Its height is measured via a callback ref.</p>
      </div>
      <p>Measured height: {height}px</p>
    </div>
  );
}

Note Callback refs fire whenever the ref attaches or detaches. In React 19, callback refs can return a cleanup function that runs when the element is removed, similar to useEffect cleanup. Useful for measuring elements or integrating third-party DOM libraries.

HCHTML & CSS

REReact