0

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.

1
  • Boa noite Marcelo, gostaria de saber se a minha resposta lhe ajudou ou não.
    – Syzoth
    Commented 23/03/2015 às 2:03

1 Resposta 1

2

Os elementos não quebram por causa do overflow:;, eles quebram por causa que os elementos filhos se limitam a largura.

Uma solução rápida é usar a propriedade css white-space: nowrap; no seu elemento pai combinado com display: inline-block; nos elementos filhos (Não necessita aplicar aos netos)

O Resultado deve ser algo como:

div.parent {
  width: 300px;
  overflow: auto;
  white-space: nowrap;
}

div.child {
  width: 100px;
  height: 35px;
  margin: 0 5px 5px 0;
  background: #fc0;
  display: inline-block;
}
<div class="parent">
   <div class="child">test</div>
   <div class="child">test</div>
   <div class="child">test</div>
   <div class="child">test</div>
   <div class="child">test</div>
</div>

No caso do seu código, você deverá:

  • Adicionar white-space: nowrap; para .node
  • Remover os floats de .lft e .rgt
  • E adicionar display:inline-block; combinado com vertical-align: top; (vertical-align só funciona com display: inline; e inline-block) para .lft e .rgt

O código deve ficar assim:

.root {
    position: absolute !important;
    margin:0;
    padding:0;
    overflow-x: auto;
    display:block;
    text-align:center;
    background-color: #ddd;
}
.node {
    width: auto;
    height:auto;
	white-space: nowrap;
}
.lft, .rgt {
    margin:5px;
    margin-top: 20px;
    min-width:60px;
    min-height:60px;
    display: inline-block;
    vertical-align: top;
}
.rgt {
    border:1px solid #000;
    background-color: #ccc;
}
.lft {
    border:1px solid #fff;
    background-color: #eee;
}
        <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .