These keywords specify the elementβs inner display
type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These keywords are used as values of the display
property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the <display-outside>
keywords.
Syntax
Valid <display-inside>
values:
flow
- The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is
inline
orrun-in
, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.Depending on the value of other properties (such as
position
,float
, oroverflow
) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (BFC) for its contents or integrates its contents into its parent formatting context. flow-root
- The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
table
- These elements behave like HTML
<table>
elements. It defines a block-level box. flex
- The element behaves like a block element and lays out its content according to the flexbox model.
grid
- The element behaves like a block element and lays out its content according to the grid model.
ruby
- The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML
<ruby>
elements.
Note: Browsers that support the two value syntax, on finding the inner value only, such as when display: flex
or display: grid
is specified, will set their outer value to block
. This will result in expected behavior; for example if you specify an element to be display: grid
, you would expect that the box created on the grid container would be a block level box.
Examples
In this example the parent box has been given display: flow-root
and so establishes a new BFC and contains the floated item.
HTML
<div class="box"> <div class="float">I am a floated box!</div> <p>I am content inside the container.</p> </div>
CSS
.box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }
Result
Specifications
Specification | Status |
---|---|
CSS Display Module Level 3 The definition of 'display-inside' in that specification. |
Candidate Recommendation |
Browser compatibility
Support of multiple keyword values
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Multi-keyword values | Chrome No support No | Edge No support No | Firefox Full support 70 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
Support of flow-root
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flow-root | Chrome Full support 58 | Edge Full support 79 | Firefox Full support 53 | IE No support No | Opera Full support 45 | Safari Full support 13 | WebView Android Full support 58 | Chrome Android Full support 58 | Firefox Android Full support 53 | Opera Android Full support 43 | Safari iOS Full support 13 | Samsung Internet Android Full support 7.0 |
Legend
- Full support
- Full support
- No support
- No support
Support of table
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
table , table-cell , table-column , table-column-group , table-footer-group , table-header-group , table-row , and table-row-group | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 8 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support β€37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
Support of grid
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid | Chrome Full support 57 | Edge
Full support
16
| Firefox Full support 52 | IE
Partial support
10
| Opera Full support 44 | Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android Full support 52 | Opera Android Full support 43 | Safari iOS Full support 10.3 | Samsung Internet Android
Full support
6.0
|
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
Support of flex
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex | Chrome
Full support
29
| Edge Full support 12 | Firefox
Full support
20
| IE
Partial support
11
| Opera
Full support
16
| Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android
Full support
20
| Opera Android
Full support
16
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
2.0
|
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
Support of ruby
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ruby , ruby-base , ruby-base-container , ruby-text , and ruby-text-container | Chrome No support No | Edge No support 12 — 79 | Firefox
Full support
38
| IE Full support 7 | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
38
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.