Div not having a top postion of 0%-CodePudding

I have a parent div with multiple child divs inside that are spaced around to fit the main div. The middle child div has multiple divs inside it that contain different data. I have separated the divs inside the middle div into a left and a right part of the middle div now the left side is aligned properly to fit the middle div with the proper top positioning and height but the right div is not having a 0% top positioning and not having a height of 100%. To make it easier to identify, the right div is the one that has inner html of USD 900. I want it to have a top of 0% and a height of 100%. How can I achieve that? Any help is appreciated. Thanks in advance.

.shelf2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 24%;
  left: 0%;
  width: 100%;
  background-color: #87CEEB;
}

.shelf2 .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 {
  width: 80%;
  height: auto;
  background-color: orange;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 .leftLevel2Items {
  position: relative;
  left: 0%;
  width: 85%;
  height: auto;
  background-color: gold;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: blue;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items p {
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: green;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items p {
  position: absolute;
  left: 0%;
  font-size: 1vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .rightLevel2Items {
  position: relative;
  top: 0%;
  left: 85%;
  width: 15%;
  height: 100%;
  background-color: pink;
}

.shelf2 .level2 .rightLevel2Items p {
  position: absolute;
  top: 0%;
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

<div >
  <div >

  </div>
  <div >
    <div >
      <div >
        <p>I.PHONE 11 PRO MAX 256GB COMPLETE BOX WITH ALL ACCESSORIES FOR SALE</p>
      </div>
      <div >
        <p>Posted 1 day ago</p>
      </div>
    </div>
    <div >
      <P>USD 900</P>
    </div>
  </div>
  <div >

  </div>
</div>

CodePudding user response：

Remove left: 85%; from .shelf2 .level2 .rightLevel2Items. Then set display: flex; with align-items: baseline; on .level2.

In my personal opinion, I think you could achieve the desired result by not using so much flex. Flex is great but it works best when you use it only on the items that need it.

You can regain your pink background color if you remove the absolute positioning on .shelf2 .level2 .rightLevel2Items p. If you go that route, I would use align-items: center; instead of baseline.

.shelf2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 24%;
  left: 0%;
  width: 100%;
  background-color: #87CEEB;
}

.shelf2 .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 {
  width: 80%;
  height: auto;
  background-color: orange;
  border-bottom: 1.5px solid green;
}

.shelf2 .level2 .leftLevel2Items {
  position: relative;
  left: 0%;
  width: 85%;
  height: auto;
  background-color: gold;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: blue;
}

.shelf2 .level2 .leftLevel2Items .topLeftLevel2Items p {
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  background-color: green;
}

.shelf2 .level2 .leftLevel2Items .bottomLeftLevel2Items p {
  position: absolute;
  left: 0%;
  font-size: 1vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level2 .rightLevel2Items {
  position: relative;
  top: 0%;
  width: 15%;
  height: 100%;
  background-color: pink;
}

.shelf2 .level2 .rightLevel2Items p {
  position: absolute;
  top: 0%;
  font-size: 1.8vw;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 4em;
  background-color: firebrick;
  border-bottom: 1.5px solid green;
}

.level2 {
  display: flex;
  align-items: baseline;
}

<div >
  <div >

  </div>
  <div >
    <div >
      <div >
        <p>I.PHONE 11 PRO MAX 256GB COMPLETE BOX WITH ALL ACCESSORIES FOR SALE</p>
      </div>
      <div >
        <p>Posted 1 day ago</p>
      </div>
    </div>
    <div >
      <P>USD 900</P>
    </div>
  </div>
  <div >

  </div>
</div>