Resize DIV

Sempervivum · Heute um 14:25

So schnell würde ich die Lösung mit CSS nicht aufgeben. Kann gut sein, dass Du auf ähnliche Probleme stößt, wenn Du das Resizing mit JS oder jQuery(-UI) machst.
Ich habe mal eine neue Demo gemacht mit scrollbaren Containern. Dort funktioniert das Scrollen einwandfrei, sowohl bei dem inneren als auch bei dem äußeren Container:

Code:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resize Container</title>
    <style>
        html,
        body {
            height: 100%;
            overflow-y: hidden;
        }

        body {
            display: flex;
            margin: 0;
        }

        .Box {
            /* position: absolute;
            top: 200px;
            left: 200px; */
            width: 200px;
            height: 100px;
            resize: both;
            overflow-x: hidden;
            overflow-y: scroll;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .Box2 {
            flex: 1 0 30%;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .innerBox {
            background-color: lightblue;
            width: 50%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
</head>

<body>


    <div class="Box">
        <div class="innerBox">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet.
        </div>
    </div>
    <div class="Box2">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
        diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit amet.
    </div>

</html>
</head>

Resize DIV

Sempervivum

Erfahrenes Mitglied

Neue Beiträge