Override ALL Eltern/Großeltern/etc ...., die Überlauf: versteckt und Witdh

Question

Ich habe ein Problem, wo ich einen JS-Controller, der mehrere HTML-Elemente und ich habe nur eine winzige Kontrolle auf einige Kind Elemente (Ich kann HTML auf ihnen bauen).

Mit der Antwort der Frage Allow specific tag to override overflow:hidden

ich ein Szenario meines Problems bauen (nicht nur der Vater verwendet overflow:hidden sondern auch den Großvater und Urgroßvater, und so weiter .... und einer der sie definiert eine niedrigere width: als mein Kind ....)

Diese example ist, wenn der Großvater hat keine width.

Diese example ist der eigentliche Code, der nicht funktioniert .... Ich NICHT das rote Feld sehen .... und Ich brauche es, um zu sehen ....

Answer 1

zu verwenden Wenn die Seite nicht gescrollt werden muss, funktioniert dies möglicherweise. Es tut zumindest, was Sie gefragt haben, zeigen Sie die rote Box.

Hinzufügen von position: fixed; zu dem Element, das Sie Brüche sehen möchten overflow: hidden;.

JSFiddle

Dies funktioniert, weil feste Elemente, die durch das Bildfenster enthalten sind.

W3 CSS Position Fixed

Answer 2

dies nicht möglich mit reinem CSS seit der width im oberen Element verwendet px. Sie können jedoch versuchen, width: auto;