2 snippets across 2 stacks - HTML & CSS, React
width: value; height: value;
min-width | max-width | min-height | max-height.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.
<element ref={(node) => {
// node is the DOM element or null on unmount
}} />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.