Prevent elements from breaking inside an overflow

Question

Prevent elements from breaking inside an overflow

Navigation

#1 by (2 votes)

0

How to leave a div with child divs with overflow , without breaking the content?

I am mounting a binary tree viewer, and I need the divs, never to break the line. In the code I'm working on, by reducing the size of the window, the div with float , goes down the sister div.

I would like to reduce the window by creating an overflow-x with scroll so as not to lose the hierarchy of the divs, including the side-by-side placement of the sisters.

.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>

Test alternative in the jsfiddle.

html css

asked by anonymous 28.12.2014 / 20:47

1 answer

I'm using openGL on android, at the time of emulating the error For in an ArrayList of Java Objects

score 2 · Accepted Answer

Elements do not break because of overflow:; , they break because child elements are limited to width.

One quick solution is to use the css property white-space: nowrap; in your parent element combined with display: inline-block; in the child elements (No need to apply to grandchildren)

The result should be something like:

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>

In the case of your code, you should:

Add white-space: nowrap; to .node
Remove floats from .lft and .rgt
And add display:inline-block; combined with vertical-align: top; (vertical-align only works with display: inline; and inline-block ) to .lft and .rgt

The code should look like this:

.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>