Ich möchte eine scrollbare Box in fieldset einfügen, aber ich bin in eine Eigenart geraten und ich kann mich nicht damit herumschlagen. Wenn Sie den bildlauffähigen div innerhalb eines fieldset einfügen, wird der fieldset maximiert, anstatt das scrollbare Element zu scrollen.
Hier ist ein Testfall . Das Folgende wird unbegrenzt erweitert (boo):
%Vor% Aber wenn Sie div verwenden, funktioniert es wie erwartet (hurra!):
Wie kann ich das fieldset dazu bringen, sich wie das div zu verhalten?
Es scheint keine praktikable Lösung für dieses Problem zu geben. Wenn Sie ein Fieldset wirklich wollen, können Sie ein div verwenden und es dann so gestalten, dass es wie ein Fieldset aussieht, aber Sie werden eine Menge Cross-Browser-Probleme und Kopfschmerzen bekommen. Beste Lösung: Refaktorieren Sie das Formular so, dass Sie keine Feldsets mehr verwenden.
WebKit und Firefox beschränken Feldgruppen so, dass sie eine "implizite" Breite haben, die auf der berechneten Breite ihres Inhalts basiert. Hier ist, wie Sie es in jedem überschreiben.
WebKit macht es relativ einfach. Dieses Verhalten ist im Standard-Stylesheet definiert, sodass Sie es überschreiben können, indem Sie min-width: 0 für das Feldset angeben.
Firefox ist ein härterer Nussbaum, da Einschränkungen bei der Feldgruppenbreite tief im Gecko-Layout-Code verankert sind. Glücklicherweise gibt es eine Problemumgehung: Fügen Sie eine Gecko-only-Regel hinzu, um die Eigenschaft display für das Feldset auf einen Wert festzulegen, der einem von mehreren internen Tabellenelementen entspricht.
Alles zusammenfügen:
%Vor%Dies basiert auf meiner Antwort auf Verwandte Frage ; Sie können sich darauf beziehen, um eine ausführlichere Erklärung zu erhalten, einschließlich der Interna des bösen Browsers im Zusammenhang mit dem Fix für Firefox.
Ich bin mir nicht sicher, ob Sie das wollen, aber das funktioniert:
%Vor%Sie können das root div auch entfernen, und es wird immer noch funktionieren.
erinnere dich
position: absolute funktioniert nicht mit display: table cell Das ist, was ich habe, wenn ich versuche, das Flex-Layout zu debuggen
also nur daran denken