html - 如何设置溢出-x : auto for nested div?

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>