← All elements
<div class="sp"><div class="l">Drag the corner</div><div class="r">Right panel flexes</div></div>About this layout
Two side by side panels where the left one can be dragged wider or narrower using resize: horizontal and overflow.
How it works
Two panels share a flex row. The left panel has resize: horizontal and overflow set to auto, which makes the browser draw a drag handle in its bottom corner. Dragging changes its width, and min-width and max-width keep it within sensible limits while the right panel fills the rest.
Ways to customise it
- Change the starting width of 45%.
- Edit the min and max width limits.
- Change the two panel background colours.
Good to know
Native resizing is mouse based and is not available in every browser on touch devices. For a keyboard-accessible splitter use a script with proper ARIA roles.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.