<display-inside>
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
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` 
Experimental

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` 
Experimental

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.

Formal syntax
-------------
```

<display-inside> =   
  flow       |  
  flow-root  |  
  table      |  
  flex       |  
  grid       |  
  ruby         
  
```

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


```html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>
```

### CSS


```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 |
| --- |
| CSS Display Module Level 3 # typedef-display-inside |

Browser compatibility
---------------------

### css.properties.display.multi-keyword\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flow-root

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.table\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.grid

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.flex

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.display.ruby\_values

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `display`
    + `<display-outside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`
* Basic Concepts of Flexbox
* Basic Concepts of Grid Layout