overflow-x
Decyduje, co zrobić z treścią wystającą w poziomie. Bliźniacza overflow-y robi to samo w pionie.
- Wartość domyślna
visible- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery blokowe, kontenery flex i grid
- JavaScript
element.style.overflowX = "auto"
Przykład
#.chips {
display: flex;
gap: 8px;
overflow-x: auto;
padding-block-end: 8px;
}
.chips button {
flex: none;
}<style>
.chips button { padding: 6px 14px; border: 1px solid #3f3f46; border-radius: 999px; background: #18181b; color: inherit; font: inherit; }
.chips button:first-child { border-color: #7c3aed; background: #2e1065; }
</style>
<p style="margin: 0 0 8px">Filtruj kursy</p>
<div class="chips">
<button type="button">Wszystkie</button>
<button type="button">HTML</button>
<button type="button">CSS</button>
<button type="button">JavaScript</button>
<button type="button">TypeScript</button>
<button type="button">Python</button>
<button type="button">React</button>
<button type="button">Next.js</button>
<button type="button">NestJS</button>
</div>Na wąskim ekranie przyciski nie łamią się do nowej linii, tylko przewijają w poziomie. flex: none nie pozwala im się ściskać, a padding-block-end odsuwa pasek przewijania od przycisków.
Definicja i zastosowanie
#Właściwość overflow-x określa, co się dzieje z treścią, która nie mieści się w elemencie na szerokość: wystaje, zostaje ucięta albo da się ją przewinąć. Jej bliźniaczka overflow-y działa tak samo, tylko w pionie. Obie przyjmują te same wartości co skrót overflow, który ustawia je jednocześnie.
Osobne osie przydają się, gdy przewijanie ma działać tylko w jednym kierunku. Poziomy pasek filtrów na telefonie, szeroka tabela czy długie linie kodu dostają overflow-x: auto, a panel boczny albo okno czatu, które przewija się w dół, overflow-y: auto.
Osie nie są jednak w pełni niezależne i ta reguła zaskakuje prawie każdego. Jeśli jedna z nich przewija lub ucina z przewijaniem (hidden, scroll, auto), to visible na drugiej zamienia się w auto, a clip w hidden. Nie da się więc przewijać w poziomie i jednocześnie pozwolić, żeby coś wystawało w pionie. Wyjątkiem jest clip, który nie wymusza tej zamiany.
Wartości inne niż visible i clip tworzą kontener przewijania. Dlatego overflow-x: hidden na przodku potrafi popsuć position: sticky. Jeśli chcesz tylko uciąć nadmiar, bez przewijania, wybierz clip.
Składnia
#overflow-x: visible | hidden | clip | scroll | auto;
overflow-y: visible | hidden | clip | scroll | auto;Wartości
#- Pasek kart wystaje poza ramkę po prawej, a plakietka nad pierwszą kartą wystaje u góry. To wartość domyślna.
- Nadmiar zostaje ucięty przy krawędzi ramki i nie ma paska przewijania. Zauważ, że plakietka też jest ucięta: oś pionowa zmieniła się z
visiblenaauto. - Poziomy pasek przewijania pojawia się tylko wtedy, gdy treść się nie mieści. Najczęstszy wybór, ale plakietka znów zostaje ucięta.
- Miejsce na pasek przewijania jest zawsze, nawet gdy treść się mieści. W systemach, które chowają paski (np. macOS), wygląda to jak
auto. - Ucina nadmiar w poziomie bez tworzenia kontenera przewijania. Oś pionowa może zostać
visible, więc plakietka wystaje w całości. oś pionowa
Ta sama logika w pionie. Lista ma stałą wysokość, a nadmiar przewija się w dół.
Wartości w praktyce
#visible
.demo { overflow-x: visible; }auto
.demo { overflow-x: auto; }scroll
auto..demo { overflow-x: scroll; }clip
visible, więc plakietka wystaje w całości..demo { overflow-x: clip; }overflow-y: auto
.demo { overflow-y: auto; }Więcej przykładów
#pre {
overflow-x: auto;
padding: 12px 16px;
border-radius: 10px;
background: #18181b;
}<pre><code>const message = 'Moduł Flexbox ukończony! Zdobywasz 150 punktów doświadczenia i odznakę za 7 dni nauki z rzędu.'</code></pre>Blok kodu nie łamie linii, więc bez overflow-x: auto długi wiersz rozepchnąłby układ strony. Z tą deklaracją przewija się tylko sam blok.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pasek kart lub filtrów na telefonie to
display: flexzoverflow-x: autona rodzicu iflex: nonena dzieciach. - Poziomy pasek przewijania całej strony lepiej naprawić u źródła, szukając zbyt szerokiego elementu. Jeśli musisz go ukryć, użyj
overflow-x: clipzamiasthidden, żeby nie popsućposition: sticky. - Nie próbuj łączyć przewijania w jednej osi z
visiblew drugiej. Wystające menu lub dymek przenieś poza przewijany element.
Powiązane hasła
#- overflowDecyduje, co zrobić z treścią, która nie mieści się w elemencie.
- scroll-snap-typeSprawia, że przewijany kontener zatrzymuje się na wybranych elementach.
- overscroll-behaviorZapobiega przewijaniu całej strony po dojściu do końca przewijanego elementu.
- white-spaceDecyduje, jak traktować spacje, entery i zawijanie linii w tekście.
- max-heightUstala maksymalną wysokość elementu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.