display-inside
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
The <display-inside>
value is defined using a keyword from the list below:
-
flow
- The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is inline
or run-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
, or overflow
) 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.
Syntax not found in DB!
Example
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
Support of multiple keyword values
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support
|
? |
? |
No |
No |
? |
? |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support
|
? |
? |
? |
No |
? |
? |
? |
Support of flow-root
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support
|
58 |
? |
53 |
? |
45 |
? |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support
|
58 |
58 |
? |
53 |
45 |
? |
7.0 |
Support of table
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
1 |
12 |
1 |
8 |
7 |
1 |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
Yes |
Yes |
12 |
4 |
Yes |
Yes |
Yes |
Support of grid
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support
|
57 |
16
- 16
- 12
Prefixed
- Prefixed Requires the vendor prefix: -ms-
|
52 |
10 Prefixed
- 10
Prefixed
- Prefixed Requires the vendor prefix: -ms-
- Internet Explorer implements an older version of the specification.
|
44 |
Yes |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support
|
57 |
57 |
16
- 16
- 12
Prefixed
- Prefixed Requires the vendor prefix: -ms-
|
52 |
44 |
Yes |
7.0 |
Legend
- Full support
- Partial support
- Experimental. Expect behavior to change in the future.
- 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 |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support |
29
- 29
- 21
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
12 |
20
- 20
- Firefox 28 added multi-line flexbox support.
- 18 — 28
Disabled
- Disabled From version 18 until version 28 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
11
- 11
- 8
- Uses the non-standard name:
-ms-flexbox
|
16
- 16
- 15
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- 12.1 — 15
|
9
- 9
- 6.1
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support |
4.4
- 4.4
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
29
- 29
- 25
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
12 |
20
- 20
- Firefox 28 added multi-line flexbox support.
- 18 — 28
Disabled
- Disabled From version 18 until version 28 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
16
- 16
- 14
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
- 12.1 — 14
|
9
- 9
- 7.1
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
Yes |
Legend
- Full support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- 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 |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
Basic support
|
? |
12 |
38
- 38
- 34 — 38
Disabled
- Disabled From version 34 until version 38 (exclusive): this feature is behind the
layout.css.ruby.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
? |
? |
? |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
Basic support
|
? |
? |
12 |
38
- 38
- 34 — 38
Disabled
- Disabled From version 34 until version 38 (exclusive): this feature is behind the
layout.css.ruby.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
|
? |
? |
? |
Legend
- Full support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also