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 3The definition of 'display-inside' in that specification. | Candidate Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Support of multiple keyword values
Update compatibility data on GitHub
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
Update compatibility data on GitHub
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
Update compatibility data on GitHub
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
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
grid
|
Chrome
Full support 57 |
Edge Full support 16 Full support 16 Full support 12 Prefixed' Implemented with the vendor prefix: -ms- |
Firefox
Full support 52 |
IE Partial support 10 Partial support 10 Prefixed' Implemented with the vendor prefix: -ms- Notes' Internet Explorer implements an older version of the specification. |
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 Full support 6.0 Notes' Samsung Internet added this earlier than the corresponding Chrome version would indicate. |
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
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex
|
Chrome Full support 29 Full support 29 Full support 21 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge
Full support 12 |
Firefox Full support 20 Full support 20 Notes' Firefox 28 added multi-line flexbox support. No support 18 — 28 Disabled' From version 18 until version 28 (exclusive): this feature is behind the |
IE Partial support 11 Partial support 11 Notes' IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers. Partial support 8 Notes' IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
Alternate Name' Uses the non-standard name: |
Opera Full support 16 Full support 16 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- No support 12.1 — 15 |
Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 20 Full support 20 Notes' Firefox 28 added multi-line flexbox support. No support 18 — 28 Disabled' From version 18 until version 28 (exclusive): this feature is behind the |
Opera Android Full support 16 Full support 16 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- No support 12.1 — 14 |
Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- |
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
Update compatibility data on GitHub
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 Full support 38 No support 34 — 38 Disabled' From version 34 until version 38 (exclusive): this feature is behind the |
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 Full support 38 No support 34 — 38 Disabled' From version 34 until version 38 (exclusive): this feature is behind the |
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.
See also
<display-inside> by Mozilla Contributors is licensed under CC-BY-SA 2.5.