Wie wird eine Anzeige angezeigt, wenn ein Element die Größe des übergeordneten Elements mit CSS überschreitet?

Question

Angenommen, ich habe ein div .parent, das ein anderes div .child enthält. Kann ich, und wenn ja, wie zeige ich eine Anzeige (d. H. Ein Symbol), wenn .child die Breite von .parent überschreitet, mit CSS?

Ich habe mein Ziel mit jQuery erreicht (siehe unten), aber ich suche nach einer CSS-Lösung, da ich versuche, meine jQuery-Nutzung so niedrig wie möglich zu halten.

Hinweis: Das .child div hat eine dynamische Breite.

Noch ein Hinweis: Ich möchte nicht den Inhalt des divs

var x = $('.child').offset().left + $('.child').width(); 
 

 
var y = $('.parent').offset().left + $('.parent').width(); 
 

 
if (x > y) { 
 

 
    var z = x - y; 
 

 
    $('.child') 
 
    .append($('<div></div>') 
 
     .css('left', z - 10) 
 
     .css('position', 'absolute') 
 
     .css('top', $('.child').height()/2 - 10) 
 
     .text('>')); 
 

 
}

.parent { 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 40px; 
 
    border: 1px solid red; 
 
    height: 100px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    Some text 
 
    </div> 
 
</div>

Answer 1

Ich lese Ihre Frage und Kommentare bearbeiten. Und ich hatte eine Idee. Ja, ich denke, der beste Weg für Ihr Problem ist die Verwendung von Javascript.

Aber ich beschloss, Alternativen zu finden :)

Deshalb habe ich auf diese Lösung 10 Minuten Zeit damit verbracht.

Ja, es funktioniert nur für Webkit-Browser. Aber es ist möglich.

.parent { 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow:auto; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    top: 40px; 
 
    border: 1px solid red; 
 
    height: 100px; 
 
    width: 400px; 
 
} 
 

 
.parent1 { 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow:auto; 
 
} 
 

 
.child1 { 
 
    position: absolute; 
 
    top: 40px; 
 
    border: 1px solid red; 
 
    height: 400px; 
 
    width: 100px; 
 
} 
 

 
::-webkit-scrollbar { 
 
     background: transparent; 
 
} 
 

 

 
::-webkit-scrollbar-button:horizontal:end { 
 
    border-top: 8px solid transparent; 
 
    border-bottom: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-left:8px solid red; 
 
} 
 

 
::-webkit-scrollbar-button:vertical:end { 
 
    border-left: 8px solid transparent; 
 
    border-bottom: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-top:8px solid blue; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    Some text 
 
    </div> 
 
</div> 
 

 
<div class="parent1"> 
 
    <div class="child1"> 
 
    Some text 
 
    </div> 
 
</div>