0

Here is a sample design (make the preview wide -- ideally 800px). https://jsfiddle.net/Brunni/2n3w33g9/

Basically it's a bunch of divs nested with flex and everything works well until container. Then I have the transitioner div which serves for push-right-to-left transitions (I put two example template-wrappers that are currently supposedly scrolling).

I don't understand why the transitioner div is computed as height=0. I guess children can not have a dependency on the parent since the parent is flowed depending on the children, but I couldn't find a statement that this is absolutely true.

Then things get worse since I need to absolute-position the template-wrappers that will be animated. My ultimate goal is to have the scroller/template-wrapper to be 100% of the container even though they are absolute-positioned. Is that even possible?

Brunni
  • 143
  • 1
  • 11
  • 2
    [Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) – Michael Benjamin Aug 10 '16 at 02:37
  • [Chrome / Safari not filling 100% height of flex parent](http://stackoverflow.com/q/33636796/3597276) – Michael Benjamin Aug 10 '16 at 02:39
  • what want excepted ? – Sumit patel Aug 10 '16 at 03:51
  • Thanks!! That's actually the solution. I don't see how I didn't figure that. Anyway thank you a lot! How can we mark this as resolved? For future reference, in my snippet you have to set `position:relative` on `#container`, `position:absolute` on `.transitioner`, and then remove the `top:75px` on `.template-wrapper` and it works perfectly! – Brunni Aug 11 '16 at 03:06

0 Answers0