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

is possible in way align block of text unknown in advance height right bottom of parent unknown height? needs pure css. tried use flexbox, float, absolute positioning, unable figure out.

there 1 pretty answer https://stackoverflow.com/a/18171538/4716464, looks weird , can buggy in different browsers.

floating image bottom right text wrapping around partially addresses problem because topic starter there has @ least inner block of known size, in case both dynamic, calc (100% - 200px) wouldn't work in case.

would work you? overflow hide parent if could smaller child avoid weird visual.

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

---

edit:

so, missed text wrapping part. this solution whipped in codepen leverages css3 multiple column layout accomplish effect you're looking for. adjust body size see in full effect.

can use... says should work ie10+ , on mobile browsers. didn't specify browser, works needs.

also note, i'm using autoprefixer in codepen, you'll need manually prefix column-count if don't have part of build step. check out css tricks article additional info on multi-column.

from codepen:

<div class="parent">    ... text ...    <div class="child">      ... text ...    </div> </div>  .parent {   background: red;   border: 3px solid #000;   column-count: 2; }  .child {   background: orange;   border: 1px solid black; }