如何为嵌套div设置overflow-x：auto？

Question

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

正如你所看到的那样 即使我设置overflow-x：auto，类“lv6”和类“lv5”也无法正确显示。 如何设置overflow：x auto以使其正确？

Answer 1

你的意思是那样的？

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

Answer 2

你需要使整个div更大，或者你可以设置overflow-x来滚动。

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

Answer 3

将CSS white-space: nowrap;添加到lvl元素。