Set a max width to div with children in absolute

March 21, 2022

I have a root div with a max width and then a container and some children in absolute.

.root {
  background-color: tomato;
  max-width: 400px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
}

.item {
  background-color: steelblue;
  width: 100px;
  height: 100px;
  position: absolute;
}

<div class="root">
    <div class="container ">
        <div class="item" style="top: 0px; left: 0px"></div>
        <div class="item" style="top: 0px; left: 110px"></div>
      <div class="item" style="top: 0px; left: 220px"></div>
        <div class="item" style="top: 110px; left: 0px"></div>
    </div>
</div>

Why the tomato background isn’t visible? Why that div has height = 0?

What I want to achieve is a the root div with a max-width and then some children in absolute position that do not overflow the parent div