Como deixar uma div com divs filhas com overflow
, sem quebrar o conteúdo?
Estou montando um visualizador de árvore binária, e preciso que as divs, nunca quebrem a linha. No código que estou trabalhando, ao reduzir o tamanho da janela, a div com float
, vai para baixo da div irmã.
Eu gostaria, que ao reduzir a janela, criasse um overflow-x com scroll para não perder a hierarquia das divs, inclusive o posicionamento lado-a-lado das irmãs.
.root {
position: absolute !important;
margin:0;
padding:0;
overflow-x: auto;
display:block;
text-align:center;
background-color: #ddd;
}
.node {
width: auto;
height:auto;
}
.lft, .rgt {
margin:5px;
margin-top: 20px;
min-width:60px;
min-height:60px;
position:relative;
}
.rgt {
border:1px solid #000;
float:right;
background-color: #ccc;
}
.lft {
border:1px solid #fff;
float:left;
background-color: #eee;
}
<div class='container'>
<div class='row'>
<div class='root node'>
<p><i class="fa fa-user"></i></p>
<p>root name</p>
<p>150</p>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>200</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>100</p>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>200</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>50</p>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>50</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>100</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>150</p>
</div>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>50</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>0</p>
</div>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>100</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>50</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>100</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>50</p>
<div class='lft'>
<p><i class="fa fa-user"></i></p>
<p>lft name</p>
<p>150</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>200</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i></p>
<p>rgt name</p>
<p>50</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Alternativa do teste no jsfiddle.