Size elements based on content in CSS

The specification, CSS Intrinsic & Extrinsic Sizing Module Level 3, introduces the values max-content and min-content. These values offer more opportunities for sizing elements based on the content they contain. Here is one pattern where this can be useful.

#example-max-content {
	display: grid;
	grid-template-columns: auto max-content;
	column-gap: .5em;

#example-max-content .line-input {
	width: 100%;

#example-max-content .button {
	padding-left: 1em;
	padding-right: 1em;
	border: 2px solid grey;
	background: black;
	color: white;


The button is just big enough to contain the text within it, just taking the space necessary, while as much space as possible is allowed for the user input.

Color scheme: