DIV größer als Eltern mit Überlauf: versteckt; Position: relativ

Question

Wie kann ich ein DIV anzeigen, das größer ist als sein Vorgänger, wenn der Vorgänger DIV den Stil overflow: hidden; position: relative; hat? Hier

ein Beispiel:

HTML:

<div class="container"> 
    <div class="content"> 
    __________________________SHOW_ME 
    </div> 
</div> 

CSS:

.container { 
    position: relative; 
    padding: 10px; 
    overflow: hidden; 
    width: 10em; 
    border: 1px solid; 
    height: 50px; 
} 

.content { 
    position: absolute; 
    overflow: visible; 
    border: 5px solid red; 
} 

Hier ist dieses Beispiel auf JS Fiddle.

Ich habe versucht, den Inhalt DIV mit verschiedenen Kombinationen von position: absolute, overflow: visible, right: -100px Styling, aber es hat nicht geholfen.

Wie kann ich den Inhalt div so gestalten, dass er vollständig sichtbar ist? Ich kann das Eltern-DIV nicht mit container Klasse ändern, nur der Inhalt nach innen.

Answer 1

Wenn Sie möchten, dass die Position des Inhalts an den Container gebunden wird, können Sie grundsätzlich nicht JavaScript verwenden, um die Position auf dem Bildlauf zu aktualisieren und die Position des zu fixierenden Inhalts anstelle von absolut festzulegen.

Answer 2

Eigentlich können Sie div Inside Element mit overflow:hidden nicht zeigen, aber ich habe eine Lösung für Sie. Sie können Ihre div mit overflow:auto geben, so kann der Benutzer blättern x

Here the example fiddle

Answer 3

.container { 
 
    position: relative; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    width: auto; 
 
    border: 1px solid; 
 
    height: 50px; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    overflow: auto; 
 
    border: 5px solid red; 
 
    width: auto; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
     __________________________SHOW_ME 
 
    </div> 
 
</div>