Size elements based on content in CSS

2020-03-21

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;
}

Result:

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.