How to set div to the same height as an inline-block list even if window resizes?-CodePudding

I have a list displayed as inline-block that changes layout when the window is resized smaller, and I have the list inside of an outer section. However, when the list layout changes height, the div does not, and the content in the section below the list suddenly overlaps the list above.

tldr; How can I set the height of an outer div to the same height as the inline-block list?

My code is essentially as follows:

HTML

<section>
   <ul>
      <li><div ></div></li>
      <li><div ></div></li>
      <li><div ></div></li>
      <li><div ></div></li>
   </ul>
</section>
<section>
   <p>When the above list is 1row x 4col, this text is placed perfectly. But when the above list is 2row x 2col,
   this text will overlap the above list.</p>
</section>

CSS

section {
   min-height:100vh; // No matter what, the minimum height should be the height of the window
}

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 25vw;
}

li {
   display: inline-block;
   vertical-align: top;
   margin: 15px;
}

.imageHere {
   width: 10vw;
   height: 25vw;
}

What I have tried:

Not that I know exactly what it does, but I tried using "height: auto;" for the section, but it did nothing.
Changing the height of the section manually does change the height of the section.
I'm honestly not sure how to go about this without using @media screen, and I REALLY don't want to have to resort to manually adjusting the height of the section each time.

Hopefully there is a solution to this. Thank you so much in advance!

CodePudding user response：

I reviewed my code once more, and the actual code I had written was:

ul { list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 25vw;
}

Lo and behold, when I removed the height property, the outer section wrapped around the list content!! Really dumb mistake on my part, but problem solved nonetheless!

CodePudding user response：

I'm not quite sure if I understood your question correctly but it disturbs the overlapping of the first and the second section? Then I probably have a solution for you. Leave out the height information in the css or set it to height: min-content; so that the height is adjusted to the size of the content.

You can find documentation here https://developer.mozilla.org/en-US/docs/Web/CSS/height

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 100%;
}

li {
   display: inline-block;
   vertical-align: top;
   margin: 15px;
}

.imageHere {
   width: 15vw;
   height: 25vw;
   overflow: hidden;
}

<section>
   <ul>
      <li><div >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li>
      <li><div >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li>
      <li><div >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li>
      <li><div >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></li>
   </ul>
</section>
<section>
   <p>When the above list is 1row x 4col, this text is placed perfectly. But when the above list is 2row x 2col,
   this text will overlap the above list.</p>
</section>

Edit: .imageHere keeps height and got overflow: hidden;