Держите div в столбце рядом с плавающей точкой

Question

Вот пример некоторой разметки и CSS, с которыми я работаю:

.left {
  max-width: calc(100% - 150px);
  float: left;
  margin-right: 10px;
}

img {
  width: 400px;
  max-width: 100%;
}

.right {
  background: #eee;
  padding: 10px;
  margin: 10px 0;
  overflow: auto;
  border: 1px solid #999;
}

@media (max-width: 400px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .right.top {
    order: 1;
  }
  .right.bottom {
    order: 3;
  }
  .left {
    order: 2;
  }
}

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right top">Hello, I am Kitteh</div>
  <div class="right top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div class="right bottom">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</div>
  <div class="right bottom">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div>
</div>

Основная идея заключается в том, что изображение может иметь размер до 400px , но для текстового содержимого справа всегда должно быть не менее 150px,Текстовое содержимое будет занимать как можно больше места, которое всегда будет не менее 150 пикселей на картинке.Если вы измените размер фрагмента выше, вы увидите, что размер изображения адаптивен.

Проблема: Я бы хотел, чтобы все элементы .right оставались в столбце, а не переносилиськогда их высота превышает высоту .left div.

Предостережения:

• Упаковка .right div не возможна, потому что в этом приложении онипереупорядочены на разную ширину, используя свойство flex order.Я включил сюда медиа-запрос для демонстрации.
• Я рассмотрел использование javascript, чтобы установить высоту .left div, равную сумме .right div, но я действительно ненавижу использовать javascript длямакетов, и я бы хотел этого избежать - тем более, что это потребовало бы пересчета высоты, если содержимое должно измениться или размер браузера изменился.
• Я попытался использовать сетку CSS, как обсуждалось здесь , но это закончилосьЭто проблема, так как это заставляет первый .right div иметь равную высоту с его строкой сетки, а это не то, что я хочу.
• Установка левого поля в .right div также проблематична, так какразмер изображения чувствителен, и любое установленное поле в некоторых случаях приводит к ошибкам.

Answer 1

Вот визуальный трюк. Идея состоит в том, чтобы использовать другой элемент внутри правого элемента, чтобы содержимое всегда оставалось правым, даже если элемент становится на всю ширину, эти элементы будут иметь размер, аналогичный размеру изображения, но мы добавим некоторое отрицательное поле, чтобы покрыть отступ / границу элемента. Правильный элемент и создать иллюзию неупаковывающих элементов. Затем вы делаете изображение в абсолютной позиции.

.wrapper {
  position:relative;
}
.left {
  max-width: calc(100% - 150px);
  position: absolute;
  margin-right: 10px;
}

img {
  width: 400px;
  max-width: 100%;
}

.right {
  background: #eee;
  padding: 10px;
  height: 90px;
  margin: 10px 0;
  border: 1px solid #999;
}

.right:before {
  content: "";
  float: left;
  height: 112px;
  max-width: calc(100% - 100px); 
  width: 410px; 
  margin: -11px 10px -11px -11px;
  background: #fff;
  border-right: 1px solid #999;
}

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
  <div class="right">Meow, meow.</div>
  <div class="right">And furthermore... meow.</div>
  <div class="right">Another right</div>
  <div class="right">More right ...</div>
</div>

UPDATE

Если высота не фиксирована, вы можете попробовать использовать flexbox, а выравнивание по растяжкам сделает псевдоэлемент такой же высоты, как и содержимое:

.left {
  max-width: calc(100% - 150px);
  position: absolute;
  margin-right: 10px;
}

img {
  width: 400px;
  max-width: 100%;
}

.right {
  background: #eee;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #999;
  display:flex;
}

.right:before {
  content: "";
  max-width: calc(100% - 100px); 
  width: 410px; 
  flex-shrink:0;
  margin: -11px 10px -11px -11px;
  background: #fff;
  border-right: 1px solid #999;
}

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh</div>
  <div class="right">Meow, meow.</div>
  <div class="right">And furthermore... meow. And furthermore... meow. And furthermore... meow. And furthermore... meow. And furthermore... meow.</div>
  <div class="right">Another right</div>
  <div class="right">More right ...</div>
</div>