display-inside

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The display-inside CSS property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box.

/* Keyword values */
display-inside: auto;
display-inside: block;
display-inside: table;
display-inside: flex;
display-inside: grid;
display-inside: ruby;

/* Global values */
display-inside: inherit;
display-inside: initial;
display-inside: unset;

Value not found in DB!

Syntax

One of the keyword values listed below.

Values

auto
If the element's computed <display-outside> value is inline-level, the element is an inline element, and lays out its contents using inline layout. If the element's computed <display-outside> value is an layout-specific internal type, this elements acts as normal for its given <display-outside> value. Otherwise, this value computes to block.
block
The element lays out its contents using block layout.
table
The element lays out its contents using table layout.
flex
The element lays out its contents using flex layout.
grid
The element lays out its contents using grid layout.
ruby
The element lays out its contents using ruby layout.

Formal syntax

Syntax not found in DB!

Specifications

Specification Status Comment
CSS Display Module Level 3
The definition of 'display-inside' in that specification.		 Candidate Recommendation Initial specification

Browser compatibility

Not supported in any browser.