Height of div not according to declaration in css

Question

I have a div innerDetails which is a flex item with code as specified below:

.cover{
    height: 100vh;
    width: 100%;
}

#screenContainer{
    display: flex;
    justify-content: center;
    align-items: center;
}

#screen{
    height: 90vh;
    width: 87vw;
    background-color: #eeeeee;
    border-radius: 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#innerScreen{
    background-color: #060b22;
    height: 80vh;
    width: 80vw;
    padding: 15px;
}

#details{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap-reverse;
}

.innerDetails{
    height: 100%;
    width: 45%;
    font-size: 1.7vw;
    color: rgb(255, 117, 67);
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}

#backImage{
    background-image: url(https://placehold.it/250px250);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div class="cover" id="screenContainer">
    <div id="screen">
        <div id="innerScreen">
            <p class="heading" id="arr"></p>
            <div id="details">
                <div class="innerDetails">
                    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
                </div>
                <div id="backImage" class="innerDetails">fdbd</div>
            </div>
        </div>
    </div>
</div>

(Well, there is a lot of code but I thin without it, reproducing my problem would not be possible. Some values are in vh and vw so expand the results.)

The problem is that the div's height is automatically decreasing from my specified height (100%) to 0%.

I thought it is so because there is no content inside the div, just a background-image. So I added some padding to it but it didn't work.

However, If I insert some text in the div, only that much part has the background image.

Answer 1

Just remove the height: 100% from .innerDetails

.cover {
  height: 100vh;
  width: 100%;
}

#screenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  height: 90vh;
  width: 87vw;
  background-color: #eeeeee;
  border-radius: 2%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#innerScreen {
  background-color: #060b22;
  height: 80vh;
  width: 80vw;
  padding: 15px;
}

#details {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap-reverse;
}

.innerDetails {
  /* height: 100%; */
  width: 45%;
  font-size: 1.7vw;
  color: rgb(255, 117, 67);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

#backImage {
  background-image: url(https://placehold.it/250px250);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="cover" id="screenContainer">
  <div id="screen">
    <div id="innerScreen">
      <p class="heading" id="arr"></p>
      <div id="details">
        <div class="innerDetails">
          <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
            odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
            non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
        </div>
        <div id="backImage" class="innerDetails">fdbd</div>
      </div>
    </div>
  </div>
</div>

It works but the #details doesn't actually have a height. Add height: 100% to #details and see the result.

.cover {
  height: 100vh;
  width: 100%;
}

#screenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  height: 90vh;
  width: 87vw;
  background-color: #eeeeee;
  border-radius: 2%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#innerScreen {
  background-color: #060b22;
  height: 80vh;
  width: 80vw;
  padding: 15px;
}

#details {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap-reverse;
  height: 100%; /* or 300px etc */
}

.innerDetails {
  height: 100%;
  width: 45%;
  font-size: 1.7vw;
  color: rgb(255, 117, 67);
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
}

#backImage {
  background-image: url(https://placehold.it/250px250);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="cover" id="screenContainer">
  <div id="screen">
    <div id="innerScreen">
      <p class="heading" id="arr"></p>
      <div id="details">
        <div class="innerDetails">
          <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt ligula vel urna blandit, ut auctor dolor fermentum. Aenean ut augue tincidunt, bibendum nunc non, pulvinar nisl. Maecenas dapibus, ante vel tincidunt laoreet, sem ex finibus
            odio, sit amet ultricies ligula nunc a sem. Nam nulla velit, congue sit amet commodo interdum, consectetur sed nisi. Vivamus commodo dictum augue nec consectetur. Curabitur molestie viverra interdum. Nullam vel augue sed sem vulputate vulputate
            non id sapien. Aenean posuere egestas orci. Duis vitae suscipit ante, tempor tempor risus. Sed ut augue quis elit blandit maximus. Phasellus sit amet arcu et odio tristique malesuada</p>
        </div>
        <div id="backImage" class="innerDetails">fdbd</div>
      </div>
    </div>
  </div>
</div>