Align a block with dynamic height to right bottom of outer with dynamic height

Question

Is it possible in any way to align a block of text with an unknown in advance height to right bottom of the parent with also unknown height? Needs pure CSS. Tried to use flexbox, float, absolute positioning, but was unable to figure it out.

There is one pretty answer https://stackoverflow.com/a/18171538/4716464, but looks too weird and can be buggy in different browsers.

Floating an image to the bottom right with text wrapping around only partially addresses my problem because topic starter there has at least an inner block of known size, but in my case both are dynamic, so calc (100% - 200px) wouldn't work in my case.

Answer 1

Would this work for you? You could overflow hide the parent if it could be smaller than the child to avoid a weird visual.

.parent {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
  bottom: 0;
}

---

EDIT:

So, I completely missed the text wrapping part. This solution I whipped up in CodePen leverages the CSS3 multiple column layout to accomplish the effect you're looking for. Adjust the body size to see it in full effect.

Can I Use... says this should work IE10+ and on most mobile browsers. You didn't specify what browser, so hopefully this works for your needs.

Also note, that I'm using Autoprefixer in CodePen, so you'll need to manually prefix column-count if you don't have that as part of your build step. Check out this CSS Tricks article for any additional info on multi-column.

From CodePen:

<div class="parent">
   ... Text ...
   <div class="child">
     ... Another Text ...
   </div>
</div>

.parent {
  background: red;
  border: 3px solid #000;
  column-count: 2;
}

.child {
  background: orange;
  border: 1px solid black;
}