CSS - display-inside

Syntax  

/* 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;

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

auto <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> block <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> table <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> flex <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> grid <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> ruby

Description  

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.

Browser Compatibility  

Specifications  

License