[look997]

#frontend #css #html #javascript

Mam taką strukturę i chcę żeby zachowywało się, jakby elementu .text nie było:

![](balloon-small.jpg)

Tylko nie display:contents ani nie usunięcie go, bo jest on potrzebny do ResizeObesrver i do dodawania marginesów wewnątrz scrollowanej treści.

Problem jest z:
Dopasowanie 100% szerokości i wysokości, gdy istnieje kontener pośredni.
Zastosowałem width: fit-content; i to działa dla 7, 8, 9, ale nie dla 1 i 3.

Jaki uniwersalny styl, żeby zarówno 7, 8, 9 działało tak jak widać, ale też 1 i 3 działało tak jak w wersji "bez kontenera"?
Próbowałem w 2, 2a, 3, 3b (poprawiane) ale jakby użyć tych poprawek globalnie, to z kolei pozostałe przestają działać tak jak chcę.

Na razie zostaje niedoskonałe ręczne dopasowanie - jak w 5 i 6.

Żywa wersja i wszystkie przykłady z podanymi numerkami:
https://4vlww.csb.app/

[patrolez]

@look997: obawiam się, że ten przekaz problemu nic nikomu nie mówi i póki nie zrobisz symulacji statycznej (kilka klatek)/animacji w programie graficznym efektu, który chcesz uzyskać, to nikt nic nie odpisze.

Efektu od razu z przykładem wykorzystania w tym zagadnieniu ResizeObesrvera:

Tylko nie display:contents ani nie usunięcie go, bo jest on potrzebny do ResizeObesrver i do dodawania marginesów wewnątrz scrollowanej treści.

[look997]

@patrolez: Kod obserwera taki - czyli że jak zmieniają się wymiary treści, to customowe scrolle się dopasowują:

export const resizeOb = (node, detail={})=> {
const ce = new CustomEvent('resizeob', {

[look997]

@patrolez: Jeszcze inaczej - chcę overflow: visible, ale żeby były nadal włączone działające scrollbary, scrollowanie kółkiem myszy itd.

Wtedy ani te myki z marginesami ani ResizeObeserver nie jest potrzebny.
Ani też kontener pośredniczący, czyli cały problem z height/width:100% by zniknął.