Why Is My Background Color Not Showing If I Have Display: Inline

Why is my background color not showing if I have display: inline?

The div doesn't take up space if it's inline. if you want an inline element that shows as the children's height, then use display: inline-block;.

As for a good discussion, I'd trust QuirksMode's take better than my own. The gist is that an inline element doesn't push other elements out of the way.

Inline container isn't showing background color when wrapping elements

Inline elements have no height or width as well as som other limitations on stying- you should make them inline-block to achieve your desired effect.

In the following snippet - I smily changed the styling to inline-block and it works as I believe you want it to - I was also able to remove the text from the second block.

Also - there does not seem to be a "flex-container" class on any of the elements.

.flex-container{
    background-color: rgb(37, 220, 20);

    height: 100px;
    width: 100px;
    /* display:block; */
}
.item{
    background-color: coral;
    margin: 10px;
    height: 25px;
    width: 25px;
}
.block{
    display: inline-block; /* I changed this to inline block */
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container block" style="background-color: crimson">
      <div class="item"></div>
      <div class="item"></div>
      
    </div>
    <div
      class="container block"
      style="background-color: rgb(20, 180, 220)"
    >
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

Why don't background colors work in inline-grids

This happens because display: inline-grid; is a inline elements

Basically, an inline element does not cause a line break (start on a
new line) and does not take up the full width of a page, only the
space bounded by its opening and closing tag. It is usually used
within other HTML elements.

if you want you can colour it by using some additional styles for sample width:100%; in your case:

#inline {  display: inline-grid;  width:100%;}#block {  display: grid;}
div div {  height: 50px;}
div div:nth-child(1n) {  background-color: green;}
div div:nth-child(2n) {  background-color: rebeccapurple;}
div div:nth-child(3n) {  background-color: aquamarine;}

<body>  <div id="inline">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <div id="block">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>  </div></body>

Why isn't Lit calculating my background color within Web Components?

By default, the custom element host defaults to display: inline - which results in the background-color not showing up. Additionally setting width and height would have no effect.

Adding display: block; or display: inline-block; to your :host styles should fix the issue, recommended by these Custom Element Best Practices.

There is also some discussion around this behavior in this Github issue: Should shadow host have display: block by default.
And followup discussion around resolving this issue: Provide a lightweight mechanism to add styles to a custom element.

Why Is My Background Color Not Showing If I Have Display: Inline