CSS nested ul flowchart from bottom up - html

Question

I'm trying to figure out how to position a flowchart built with ul list growing like a tree, from bottom-up.
It's a genealogical family tree. I've made it from top down using this great code here but I want the first element in the bottom, above it the parents and above it the grandparents and so on...
Here is the code:
HTML
<div class="tree">
<ul>
<li>
<div class="dados_membro">Me</div>
<ul>
<li>
<div class="dados_membro">Father</div>
<ul>
<li>
<div class="dados_membro">Grandfather</div>
</li>
<li>
<div class="dados_membro">Grandmother</div>
</li>
</ul>
</li>
<li>
<div class="dados_membro">Mother</div>
<ul>
<li>
<div class="dados_membro">Grandfather</div>
</li>
<li>
<div class="dados_membro">Grandmother</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.tree ul {
padding-top: 20px;
position: relative;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 39px 5px 0 5px;
}
.dados_membro {
border: 1px solid;
border-radius: 20px;
width: 300px;
margin: auto;
text-align:left;
padding:10px
}
I'm testing some rules in this fiddle and could position the first node "Me" in the bottom and the other ones up with the CSS bellow, but all the nodes in the same level (parents, grandparents and so on..) get pilled up.
.tree ul {
position: absolute;
bottom:0;
}
.tree ul li ul{
position:relative;
}
.tree li {
float: right;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
margin-top:-120px
}
.dados_membro {
border: 1px solid;
border-radius: 5px;
width: 100px;
margin: auto;
text-align:left;
padding:10px
}
I don't know how big will the tree grow up nor if all the nodes will have elements. Can't use javascript for this. Any ideas?

Answer 1

You could change the order of the elements using the flexbox property flex-direction: column-reverse, if that is an option for your project (see compatibility table).

Answer 2

To revert the order of the list I gave the main container position: absolute with bottom:0, the <ul>s a position:relative and all <li>s position:absolute with bottom:50px, except for the first level that I want to be in the bottom of the container.
This way every <li> is positioned 50px above its parent <ul> that has relative position.
One last tweak to achieve the tree style was adding a class for female and male parents in order to position each one in the left and in the right above its child node. Since I'm generating this tree dinamically I can count how many levels does the tree has and calculate the distance between father/mother nodes. If I could not control the html dinamically, I would need to use javascript to count the nodes and apply the css rules on the fly (maybe I will do ti in the future, just to animate the tree generation).
The new code is here
HTML
<div class="tree">
<ul>
<li>
<div class="dados_membro">Me</div>
<ul>
<li class="f1">
<div class="dados_membro">Father</div>
<ul>
<li class="f2">
<div class="dados_membro">Grandfather f</div>
</li>
<li class="m2">
<div class="dados_membro">Grandmotherf </div>
</li>
</ul>
</li>
<li class="m1">
<div class="dados_membro">Mother</div>
<ul>
<li class="f2">
<div class="dados_membro">Grandfather m</div>
</li>
<li class="m2">
<div class="dados_membro">Grandmother m</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.tree {
position:absolute;
bottom: 0;
left:300px
}
.tree ul {
position: relative;
list-style:none;
}
.tree ul li ul li{
position: absolute;
bottom: 50px;
}
.f1{
left:-150px;
}
.m1 {
left:150px;
}
.f2{
left:-80px;
}
.m2 {
left:80px;
}
.dados_membro {
border: 1px solid;
border-radius: 5px;
width: 100px;
margin: auto;
text-align:left;
padding:10px
}