1

I have the following HTML:

<div class="container">
  <div class="box">
    <img src="https://placehold.co/600x400" class="image" />
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>
</div>

And the following CSS:

body, p {
  margin: 0;
}

.container {
  height: 100vh;
  background: skyblue;
}

.box {
  height: 100%;
}

.image {
  min-height: 0;
  height: 100%;
}

CodePen link: https://codepen.io/robkom/pen/KKGgawv

If you reduce the size of the window, the image shrinks appropriately (down to 0). This is expected. However, there is also text content inside of the box which appears outside the container!

I would like the text content (those p tags) to "squeeze" the image down, so that everything fits inside the blue box. I also do not want the box to become smaller than the text content inside it. I thought setting min-height: min-content (or max-content) would do the truck but it doesn't.

How can I achieve the effect I'm after?

Clarification: I want the p tags to basically determine the min-height of the container or box and the image to just take up the remaining space (if any) of the window. If the window is large enough then it should stretch (i.e. only the blue should be visible at all times).

chipit24
  • 6,509
  • 7
  • 47
  • 67

1 Answers1

0

Remove the container-height, then you will find that the paragraphs are inside the container.
Since they are block-elements, they are forced to appear beneath the img (which is also block), unless you assign float: left; to the img or display: flex; to the .box .

  1. float: left
    Delete the css for .box completely and amend:
.container {
  background: skyblue;
}
img {
  float: left;
}
img, p {
  max-width: 100vw;
}

OR

  1. display: flex
.container {
 background: skyblue;
}
.box {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}
img, p {
 max-width: 100vw;
}

And there you are! (I hope..)
(PS: put some more text into the paraphs and a border around them to better see how they behave.)

NicolasK
  • 31
  • 5
  • Thanks! Not quite what I'm after: I want the `p` tags to basically determine the min-height of the container or box and the image to just take up the remaining space (if any) of the window. If the window is large enough then it should stretch (i.e. only the blue should be visible at all times). – chipit24 Apr 19 '23 at 12:10