CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to set overflow-x: auto for nested div?

#create-summary {
  width: 200px;
  height:150px;
  margin-top:20px;  
  overflow-x:auto;
  overflow-y:auto;
}

.lv2 {
    margin-left:15px;
}

.lv3, .lv4, .lv5, .lv6{
    margin-left:15px;
}

#create-summary  div {
    border:1px solid red;
}
<div id="create-summary">
    <div class="lv1">
        1. Title1
        <div class="lv2">1.1. Title1.1</div>
        <div class="lv2">
            1.2. Title1.2
            <div class="lv3">1.2.1. Title1.2.1</div>
            <div class="lv3">
                1.2.2. Title1.2.2
                <div class="lv4">
                    1.2.2.1. Title1.2.2.1
                    <div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
                </div>
            <div class="lv4">1.2.2.2. Title1.2.2.2
                <div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div>
                <div class="lv5">1.2.2.2.2. Title1.2.2.2.2
                  <div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div>
                </div>
            </div>
                
        </div>
        </div>
    </div>
</div>

As you can see the class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto. How to set overflow:x auto to make it correctly?

Upvotes: 0

Views: 86

Answers (3)

Everton Lenger
Everton Lenger

Reputation: 1446

You mean like that?

#create-summary {
  width: 180px;
  height:200px;
  margin-top:20px; 
  overflow-x: auto; 
}

.lv2 {
    margin-left:15px;
}

.lv3, .lv4, .lv5, .lv6{
    margin-left:15px;
    white-space: nowrap;
}
<div id="create-summary">
    <div class="lv1">
        1. Title1
        <div class="lv2">1.1. Title1.1</div>
        <div class="lv2">
            1.2. Title1.2
            <div class="lv3">1.2.1. Title1.2.1</div>
            <div class="lv3">
                1.2.2. Title1.2.2
                <div class="lv4">
                    1.2.2.1. Title1.2.2.1
                    <div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
                </div>
            <div class="lv4">1.2.2.2. Title1.2.2.2</div>
        </div>
        </div>
    </div>
</div>

Upvotes: 1

Artanis
Artanis

Reputation: 1005

Add CSS white-space: nowrap; to lvl elements.

Upvotes: 0

dbenson
dbenson

Reputation: 326

You need to make the whole div larger, Or you can set overflow-x to scroll.

#create-summary {
  width: 250px;
  height:200px;
  margin-top:20px;  
}

.lv2 {
    margin-left:15px;
}

.lv3, .lv4, .lv5, .lv6{
    margin-left:15px;
}

#create-summary  div {
    border:1px solid red;
}
<div id="create-summary">
    <div class="lv1">
        1. Title1
        <div class="lv2">1.1. Title1.1</div>
        <div class="lv2">
            1.2. Title1.2
            <div class="lv3">1.2.1. Title1.2.1</div>
            <div class="lv3">
                1.2.2. Title1.2.2
                <div class="lv4">
                    1.2.2.1. Title1.2.2.1
                    <div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
                </div>
            <div class="lv4">1.2.2.2. Title1.2.2.2</div>
        </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions