CODEWITHSUNDEEP
htmlcss
Mario
Mario

Reputation: 4998

What is the reason why overflow: scroll does not work as expected?

How can I get the content of the div with class box, expand according to the content by adding vertical scrolls? allowing me to navigate through all the content

I tried to use overflow: scroll but without achieving the expected result.

Please look at the example that reflects the case in which I work

function toggle() {
    const box = document.querySelector('.box');

    box.style.left = box.style.left === '0px' ? '-400px' : '0px';
}
.box {
    background: #FFF;
    border-right: 1px solid #DDD;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: -400px;
    width: 400px;
    min-height: 100%;
    z-index: 1000000;
    transition: left .4s;
}

div.right {
    text-align: right;
}

details {
    margin: 20px;
}
<div class="right">
        <a href="#" onclick="toggle()">Toggle</a>
</div>
<div class="box">
    <div class="panel-body">
        <details>
            <summary>text1</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus accusantium.
            </p>
        </details>

        <details>
            <summary>text2</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text4</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text5</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text6</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text7</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>
    </div>
</div>

Upvotes: 1

Views: 26

Answers (1)

Alen.Toma
Alen.Toma

Reputation: 4870

You need to specify height in vh or px have a look

function toggle() {
    const box = document.querySelector('.box');

    box.style.left = box.style.left === '0px' ? '-400px' : '0px';
}
.box {
    background: #FFF;
    border-right: 1px solid #DDD;
    position: fixed;
    top: 0;
    left: -400px;
    width: 400px;
    min-height: 100%;
    max-height:100vh;
    z-index: 1000000;
    transition: left .4s;
    overflow: scroll;
}



div.right {
    text-align: right;
}

details {
    margin: 20px;
}
<div class="right">
        <a href="#" onclick="toggle()">Toggle</a>
</div>
<div class="box">
    <div class="panel-body">
        <details>
            <summary>text1</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus accusantium.
            </p>
        </details>

        <details>
            <summary>text2</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text3</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text4</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text5</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text6</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>

        <details>
            <summary>text7</summary>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, quasi iure velit accusamus atque fugiat
                tempore consequuntur autem voluptatibus voluptatem sequi itaque culpa aliquid nesciunt ipsa libero eius minus
                accusantium.
            </p>
        </details>
    </div>
</div>

Upvotes: 3

Related Questions