'Set a max width to div with children in absolute

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

htmlcss


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

.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 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Lalji Tadhani
Solution 3 Chandra sekhar mohanty

Related Questions