Set a max width to div with children in absolute-CodePudding

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 >
    <div >
        <div  style="top: 0px; left: 0px"></div>
        <div  style="top: 0px; left: 110px"></div>
      <div  style="top: 0px; left: 220px"></div>
        <div  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

CodePudding user response：

You root doesn't have height. When you set your items position to absolute you removed element from the normal document flow, and no space is created for the element in the page layout

CodePudding user response：

Change height for .root 100% to 100vh

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

.container {
  position: relative;
}

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

<div >
    <div >
        <div  style="top: 0px; left: 0px"></div>
        <div  style="top: 0px; left: 110px"></div>
      <div  style="top: 0px; left: 220px"></div>
        <div  style="top: 110px; left: 0px"></div>
    </div>
</div>

CodePudding user response：

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

.container {
 
}

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

<div >
    <div >
        <div  style="top: 0px; left: 0px"></div>
        <div  style="top: 0px; left: 110px"></div>
      <div  style="top: 0px; left: 220px"></div>
        <div  style="top: 110px; left: 0px"></div>
    </div>
</div>