Align the unit with dynamic height to the bottom of the outdoor with dynamic height

Question

Is it possible to somehow align a block of text with an unknown height to the lower right edge of the parent with also an unknown height? Need pure CSS. Tried to use flexbox, float, absolute positioning, but couldn't figure it out.

There is one pretty nice answer to https://stackoverflow.com/a/16813/ ... but it looks too weird and could be a bug in different browsers.

The floating image in the lower right corner with text wrapping partially affects my problem, because at the start of the topic there is at least an internal block of a known size, but in my case both are dynamic, so calc (100% - 200px) will not work in my case.

Answer 1

? , , , .

.parent {
  position: relative;
}

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

---

EDIT:

, . , CodePen, CSS3 , . , .

... , IE10 + . , , , , .

, Autoprefixer CodePen, column-count, . CSS Tricks .

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;
}