контейнер div перекрывается <p>при изменении размера

Question

У меня есть div (красное поле), который перекрывает текст (черный ящик) при изменении размера:

• Text (черный ящик ) переполняет div (красное поле) и очищает окно браузера

• Текст (черный ящик) переполняет div (красное поле)
  
  

Есть ли способ сохранить текст внутри контейнера div и сделать его pu sh напротив изображения, вызывая изменение размера изображения при изменении размера окна браузера ? Желаемое поведение изображено:

.container {
  margin: auto;
  border-color: red;
  border-style: solid;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80%;
  height: 80%;
}

img {
  margin: auto;
  border-color: blue;
  border-style: solid;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}

p {
  border-color: black;
  border-style: solid;
  margin-top: 0px;
  padding-top: 20px;
}

<div class="container">
  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.technocrazed.com%2Fwp-content%2Fuploads%2F2015%2F12%2FSimple-wallpaper-52.jpg&f=1&nofb=1">
  <p>Some text goes here.</p>
</div>

Answer 1

Это можно исправить с помощью flexbox, как показано ниже:

.container {
  margin: auto;
  border-color: red;
  border-style: solid;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
}

img {
  margin: auto;
  border-color: blue;
  border-style: solid;
  flex-basis: 0;
  flex-grow: 1;
  min-height: 0;
  max-width: 100%;
  object-fit: scale-down;
}

p {
  border-color: black;
  border-style: solid;
  margin: 0;
  padding-top: 20px;
}

* {
  box-sizing:border-box;
}

<div class="container">
  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.technocrazed.com%2Fwp-content%2Fuploads%2F2015%2F12%2FSimple-wallpaper-52.jpg&f=1&nofb=1">
  <p>Some text goes here.</p>
</div>

Answer 2

Проблема заключается в следующем: изображение не использует полную ширину родительского контейнера, поскольку вы не определяете ширину со 100%. Если вы сделаете это, изображение умещается в контейнер, и у вас больше нет места. Но для того, чтобы вместить контейнер, вы должны изменить подгонку объекта к покрытию