{"id":4411,"date":"2026-03-02T11:59:58","date_gmt":"2026-03-02T04:59:58","guid":{"rendered":"https:\/\/wpdesign.vn\/css-layout-fragmentation-overflow-va-scroll-containers\/"},"modified":"2026-05-04T16:44:23","modified_gmt":"2026-05-04T09:44:23","slug":"css-layout-fragmentation-overflow-va-scroll-containers","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/css-layout-fragmentation-overflow-va-scroll-containers\/","title":{"rendered":"CSS Layout: Fragmentation, Overflow v\u00e0 Scroll Containers"},"content":{"rendered":"\n

Trong ki\u1ebfn tr\u00fac hi\u1ec3n th\u1ecb c\u1ee7a CSS hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c x\u1eed l\u00fd n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 k\u00edch th\u01b0\u1edbc v\u00f9ng ch\u1ee9a (Overflowing Content) kh\u00f4ng ch\u1ec9 \u0111\u01a1n thu\u1ea7n l\u00e0 hi\u1ec3n th\u1ecb thanh cu\u1ed9n. Tr\u00ecnh duy\u1ec7t v\u1eadn h\u00e0nh ba c\u01a1 ch\u1ebf ri\u00eang bi\u1ec7t \u1edf c\u00e1c t\u1ea7ng kh\u00e1c nhau c\u1ee7a Layout Engine: Overflow<\/strong>, Fragmentation<\/strong>, v\u00e0 Scroll Containers<\/strong>. <\/p>\n\n

Vi\u1ec7c nh\u1ea7m l\u1eabn gi\u1eefa c\u00e1c kh\u00e1i ni\u1ec7m n\u00e0y th\u01b0\u1eddng d\u1eabn \u0111\u1ebfn c\u00e1c l\u1ed7i ph\u1ed5 bi\u1ebfn v\u1ec1 sticky positioning<\/code>, stacking context<\/code> v\u00e0 hi\u1ec7u n\u0103ng render. B\u00e0i vi\u1ebft n\u00e0y ph\u00e2n t\u00edch b\u1ea3n ch\u1ea5t h\u00ecnh h\u1ecdc v\u00e0 h\u00e0nh vi c\u1ee7a ch\u00fang trong quy tr\u00ecnh Rendering. <\/p>\n\n

1. Overflow: C\u01a1 ch\u1ebf C\u1eaft v\u00e0 Qu\u1ea3n l\u00fd Hi\u1ec3n th\u1ecb<\/h4>\n\n

Overflow<\/strong> x\u1ea3y ra khi m\u1ed9t h\u1ed9p (Box) kh\u00f4ng \u0111\u1ee7 kh\u00f4ng gian \u0111\u1ec3 ch\u1ee9a n\u1ed9i dung b\u00ean trong. Thu\u1ed9c t\u00ednh overflow<\/code> (v\u00e0 c\u00e1c bi\u1ebfn th\u1ec3 nh\u01b0 overflow-x<\/code>, overflow-y<\/code>, overflow-clip<\/code>) x\u00e1c \u0111\u1ecbnh ranh gi\u1edbi hi\u1ec3n th\u1ecb. <\/p>\n\n

1.1 B\u1ea3n ch\u1ea5t Layout<\/h6>\n\n

V\u1ec1 m\u1eb7t l\u00fd thuy\u1ebft, overflow<\/code> kh\u00f4ng l\u00e0m thay \u0111\u1ed5i lu\u1ed3ng b\u1ed1 c\u1ee5c (Layout Flow).<\/p>\n\n

    \n
  • K\u00edch th\u01b0\u1edbc h\u00ecnh h\u1ecdc:<\/strong> K\u00edch th\u01b0\u1edbc t\u00ednh to\u00e1n (Layout size) c\u1ee7a ph\u1ea7n t\u1eed kh\u00f4ng \u0111\u1ed5i.<\/li>\n\n\n\n
  • H\u1ec7 t\u1ecda \u0111\u1ed9:<\/strong> N\u1ed9i dung v\u1eabn t\u1ed3n t\u1ea1i \u0111\u1ea7y \u0111\u1ee7 trong Box Formatting Context<\/code> (BFC), ch\u1ec9 c\u00f3 ph\u1ea7n hi\u1ec3n th\u1ecb b\u1ecb gi\u1edbi h\u1ea1n b\u1edfi l\u1edbp m\u1eb7t n\u1ea1 (clipping mask).<\/li>\n\n\n\n
  • Paint Phase:<\/strong> \u0110\u00e2y l\u00e0 c\u01a1 ch\u1ebf ch\u1ee7 y\u1ebfu t\u00e1c \u0111\u1ed9ng v\u00e0o giai \u0111o\u1ea1n Paint. Tr\u00ecnh duy\u1ec7t t\u1ea1o ra m\u1ed9t v\u00f9ng Clipping Region<\/code> \u0111\u1ec3 \u1ea9n \u0111i c\u00e1c pixel n\u1eb1m ngo\u00e0i ranh gi\u1edbi \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. <\/li>\n<\/ul>\n\n

    2. Fragmentation: C\u01a1 ch\u1ebf Chia t\u00e1ch Layout<\/h4>\n\n

    Fragmentation<\/strong> (Ph\u00e2n m\u1ea3nh) l\u00e0 qu\u00e1 tr\u00ecnh chia m\u1ed9t h\u1ed9p n\u1ed9i dung th\u00e0nh nhi\u1ec1u m\u1ea3nh (Fragments<\/strong>) \u0111\u1ec3 hi\u1ec3n th\u1ecb qua nhi\u1ec1u v\u00f9ng ch\u1ee9a kh\u00e1c nhau (Fragmentainers<\/strong>).<\/p>\n\n

    2.1 C\u01a1 ch\u1ebf v\u1eadn h\u00e0nh<\/h6>\n\n

    Kh\u00e1c v\u1edbi overflow<\/code> ch\u1ec9 \u0111\u01a1n gi\u1ea3n l\u00e0 “gi\u1ea5u” n\u1ed9i dung, Fragmentation can thi\u1ec7p s\u00e2u v\u00e0o Layout Phase<\/strong>:<\/p>\n\n

      \n
    • Flow Disruption:<\/strong> N\u1ed9i dung b\u1ecb ng\u1eaft qu\u00e3ng v\u00e0 ph\u00e2n b\u1ed5 l\u1ea1i v\u00e0o c\u00e1c c\u1ed9t (multicol<\/code>), c\u00e1c trang (paged media<\/code>) ho\u1eb7c c\u00e1c v\u00f9ng (regions<\/code>).<\/li>\n\n\n\n
    • Fragmentainers:<\/strong> L\u00e0 c\u00e1c th\u1ef1c th\u1ec3 ch\u1ee9a fragment nh\u01b0 Column box ho\u1eb7c Page box.<\/li>\n\n\n\n
    • Thu\u1eadt to\u00e1n Break:<\/strong> Layout Engine ph\u1ea3i t\u00ednh to\u00e1n c\u00e1c \u0111i\u1ec3m ng\u1eaft (Break opportunities<\/code>), \u01b0u ti\u00ean ng\u1eaft v\u00e0 x\u1eed l\u00fd c\u00e1c d\u00f2ng m\u1ed3 c\u00f4i (widows\/orphans<\/code>).<\/li>\n<\/ul>\n\n
      2.2 \u1ee8ng d\u1ee5ng \u0111\u1eb7c th\u00f9<\/h6>\n\n

      Fragmentation l\u00e0 l\u1ef1a ch\u1ecdn duy nh\u1ea5t cho c\u00e1c thi\u1ebft k\u1ebf mang t\u00ednh bi\u00ean t\u1eadp (Editorial Layout):<\/p>\n\n

        \n
      • B\u00e1o ch\u00ed, t\u1ea1p ch\u00ed s\u1ed1 (Multi-column).<\/li>\n\n\n\n
      • Xu\u1ea5t b\u1ea3n PDF\/In \u1ea5n (Print CSS).<\/li>\n<\/ul>\n\n

        3. Scroll Containers: Thi\u1ebft l\u1eadp Ng\u1eef c\u1ea3nh Cu\u1ed9n \u0111\u1ed9c l\u1eadp<\/h4>\n\n

        M\u1ed9t Scroll Container<\/strong> h\u00ecnh th\u00e0nh khi thu\u1ed9c t\u00ednh overflow<\/code> \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp kh\u00e1c visible<\/code> ho\u1eb7c clip<\/code>. L\u00fac n\u00e0y, ph\u1ea7n t\u1eed kh\u00f4ng ch\u1ec9 \u0111\u01a1n thu\u1ea7n c\u1eaft n\u1ed9i dung m\u00e0 c\u00f2n thi\u1ebft l\u1eadp m\u1ed9t h\u1ec7 sinh th\u00e1i cu\u1ed9n ho\u00e0n ch\u1ec9nh. <\/p>\n\n

        3.1 \u0110\u1eb7c t\u00ednh k\u1ef9 thu\u1eadt<\/h6>\n\n
          \n
        • Scrollport:<\/strong> V\u00f9ng hi\u1ec3n th\u1ecb th\u1ef1c t\u1ebf c\u1ee7a n\u1ed9i dung cu\u1ed9n (th\u01b0\u1eddng nh\u1ecf h\u01a1n ho\u1eb7c b\u1eb1ng Padding Box).<\/li>\n\n\n\n
        • Scroll Offset:<\/strong> Thi\u1ebft l\u1eadp m\u1ed9t h\u1ec7 t\u1ecda \u0111\u1ed9 \u0111\u1ed9ng, n\u01a1i v\u1ecb tr\u00ed c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed con thay \u0111\u1ed5i so v\u1edbi scrollport<\/code> nh\u01b0ng kh\u00f4ng thay \u0111\u1ed5i so v\u1edbi document flow.<\/li>\n\n\n\n
        • Scroll Timeline:<\/strong> Trong CSS hi\u1ec7n \u0111\u1ea1i, Scroll Container t\u1ea1o ra m\u1ed9t m\u1ed1c th\u1eddi gian cho c\u00e1c hi\u1ec7u \u1ee9ng Scroll-driven animations<\/code>.<\/li>\n<\/ul>\n\n
          3.2 T\u00e1c \u0111\u1ed9ng \u0111\u1ebfn Positioning<\/h6>\n\n
            \n
          • Sticky Positioning:<\/strong> M\u1ed9t ph\u1ea7n t\u1eed position: sticky<\/code> s\u1ebd b\u1ecb “giam gi\u1eef” b\u1edfi Scroll Container g\u1ea7n nh\u1ea5t. N\u1ebfu t\u1ed5 ti\u00ean c\u1ee7a n\u00f3 kh\u00f4ng ph\u1ea3i l\u00e0 Scroll Container, n\u00f3 s\u1ebd b\u00e1m theo Viewport. <\/li>\n\n\n\n
          • Containing Block:<\/strong> Scroll Container th\u01b0\u1eddng t\u1ea1o ra m\u1ed9t m\u00f4i tr\u01b0\u1eddng ch\u1ee9a (containment) cho c\u00e1c ph\u1ea7n t\u1eed con, \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn vi\u1ec7c t\u00ednh to\u00e1n v\u1ecb tr\u00ed absolute<\/code>.<\/li>\n<\/ul>\n\n

            4. Ma tr\u1eadn So s\u00e1nh: B\u1ea3n ch\u1ea5t v\u00e0 H\u00e0nh vi<\/h4>\n\n
            \"\"<\/figure>\n\n

            5. T\u01b0\u01a1ng t\u00e1c l\u1ed3ng nhau (Nested Scenarios)<\/h4>\n\n

            5.1 Fragmentation b\u00ean trong Scroll Container<\/h6>\n\n

            V\u00ed d\u1ee5: M\u1ed9t b\u00e0i b\u00e1o \u0111a c\u1ed9t (multicol<\/code>) n\u1eb1m trong m\u1ed9t b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n c\u00f3 th\u1ec3 cu\u1ed9n (overflow: auto<\/code>).<\/p>\n\n

              \n
            • K\u1ebft qu\u1ea3:<\/strong> Tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n Fragmentation \u0111\u1ec3 chia c\u1ed9t tr\u01b0\u1edbc, sau \u0111\u00f3 Scroll Container s\u1ebd cu\u1ed9n to\u00e0n b\u1ed9 t\u1eadp h\u1ee3p c\u00e1c c\u1ed9t \u0111\u00f3 nh\u01b0 m\u1ed9t kh\u1ed1i th\u1ed1ng nh\u1ea5t.<\/li>\n<\/ul>\n\n
              5.2 Scroll Container b\u00ean trong Fragment<\/h6>\n\n

              V\u00ed d\u1ee5: M\u1ed9t b\u1ea3ng d\u1eef li\u1ec7u c\u00f3 thanh cu\u1ed9n n\u1eb1m trong c\u1ed9t th\u1ee9 2 c\u1ee7a m\u1ed9t Layout b\u00e1o ch\u00ed.<\/p>\n\n

                \n
              • K\u1ebft qu\u1ea3:<\/strong> Scroll Container ho\u1ea1t \u0111\u1ed9ng \u0111\u1ed9c l\u1eadp b\u00ean trong ranh gi\u1edbi c\u1ee7a Fragment \u0111\u00f3. Vi\u1ec7c cu\u1ed9n b\u00ean trong kh\u00f4ng l\u00e0m \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn lu\u1ed3ng ch\u1ea3y c\u1ee7a c\u00e1c Fragment kh\u00e1c. <\/li>\n<\/ul>\n\n

                6. \u1ea2nh h\u01b0\u1edfng \u0111\u1ebfn Hi\u1ec7u n\u0103ng (Performance)<\/h4>\n\n
                  \n
                1. Overflow (Clip\/Hidden):<\/strong> Hi\u1ec7u n\u0103ng c\u1ef1c cao v\u00ec ch\u1ec9 c\u1ea7n c\u1eaft b\u1ecf c\u00e1c pixel th\u1eeba khi Paint, kh\u00f4ng y\u00eau c\u1ea7u t\u00ednh to\u00e1n l\u1ea1i h\u00ecnh h\u1ecdc.<\/li>\n\n\n\n
                2. Scroll Container:<\/strong> \u0110\u00f2i h\u1ecfi t\u1ea1o l\u1edbp (Layer Promotion<\/code>) \u0111\u1ec3 x\u1eed l\u00fd cu\u1ed9n m\u01b0\u1ee3t m\u00e0 b\u1eb1ng GPU (Compositor thread). C\u00f3 chi ph\u00ed v\u1ec1 b\u1ed9 nh\u1edb cho c\u00e1c l\u1edbp \u0111\u1ed3 h\u1ecda. <\/li>\n\n\n\n
                3. Fragmentation:<\/strong> Ti\u00eau t\u1ed1n t\u00e0i nguy\u00ean nh\u1ea5t. M\u1ed7i khi k\u00edch th\u01b0\u1edbc container thay \u0111\u1ed5i, tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u00ednh to\u00e1n l\u1ea1i to\u00e0n b\u1ed9 c\u00e1c \u0111i\u1ec3m ng\u1eaft (break points) v\u00e0 ph\u00e2n b\u1ed5 l\u1ea1i n\u1ed9i dung (Re-fragmentation). <\/li>\n<\/ol>\n\n

                  7. Sai l\u1ea7m ph\u1ed5 bi\u1ebfn v\u00e0 Gi\u1ea3i ph\u00e1p<\/h4>\n\n
                    \n
                  • L\u1ea1m d\u1ee5ng Scroll thay v\u00ec Fragment:<\/strong> S\u1eed d\u1ee5ng thanh cu\u1ed9n cho c\u00e1c v\u0103n b\u1ea3n c\u1ef1c d\u00e0i tr\u00ean m\u00e0n h\u00ecnh r\u1ed9ng l\u00e0m gi\u1ea3m tr\u1ea3i nghi\u1ec7m \u0111\u1ecdc (Readability). Gi\u1ea3i ph\u00e1p: S\u1eed d\u1ee5ng column-width<\/code> \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng ph\u00e2n m\u1ea3nh theo chi\u1ec1u ngang. <\/li>\n\n\n\n
                  • Sticky kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng:<\/strong> Do c\u00f3 m\u1ed9t Scroll Container \u1ea9n (overflow: hidden<\/code>) \u1edf c\u1ea5p cha l\u00e0m tri\u1ec7t ti\u00eau kh\u1ea3 n\u0103ng b\u00e1m c\u1ee7a position: sticky<\/code>.<\/li>\n\n\n\n
                  • Nested Scroll Trap:<\/strong> L\u1ed3ng qu\u00e1 nhi\u1ec1u Scroll Containers khi\u1ebfn tr\u1ea3i nghi\u1ec7m cu\u1ed9n tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng b\u1ecb xung \u0111\u1ed9t.<\/li>\n<\/ul>\n\n

                    8. K\u1ebft lu\u1eadn<\/h4>\n\n
                      \n
                    • D\u00f9ng Overflow<\/strong> khi b\u1ea1n ch\u1ec9 c\u1ea7n ki\u1ec3m so\u00e1t t\u00ednh th\u1ea9m m\u1ef9 v\u00e0 c\u1eaft b\u1ecf ph\u1ea7n d\u01b0 th\u1eeba.<\/li>\n\n\n\n
                    • D\u00f9ng Fragmentation<\/strong> khi b\u1ea1n c\u1ea7n c\u1ea5u tr\u00fac l\u1ea1i n\u1ed9i dung theo phong c\u00e1ch in \u1ea5n ho\u1eb7c \u0111a c\u1ed9t.<\/li>\n\n\n\n
                    • D\u00f9ng Scroll Container<\/strong> khi c\u1ea7n t\u1ea1o ra m\u1ed9t v\u00f9ng t\u01b0\u01a1ng t\u00e1c \u0111\u1ed9c l\u1eadp v\u1edbi Viewport.<\/li>\n<\/ul>\n\n

                      Vi\u1ec7c l\u1ef1a ch\u1ecdn \u0111\u00fang c\u01a1 ch\u1ebf kh\u00f4ng ch\u1ec9 gi\u00fap giao di\u1ec7n hi\u1ec3n th\u1ecb ch\u00ednh x\u00e1c m\u00e0 c\u00f2n t\u1ed1i \u01b0u h\u00f3a Rendering Pipeline<\/code>, \u0111\u1ea3m b\u1ea3o t\u1ed1c \u0111\u1ed9 ph\u1ea3n h\u1ed3i 60fps cho \u1ee9ng d\u1ee5ng web.<\/p>\n","protected":false},"excerpt":{"rendered":"

                      Trong ki\u1ebfn tr\u00fac hi\u1ec3n th\u1ecb c\u1ee7a CSS hi\u1ec7n \u0111\u1ea1i, vi\u1ec7c x\u1eed l\u00fd n\u1ed9i dung v\u01b0\u1ee3t qu\u00e1 k\u00edch th\u01b0\u1edbc v\u00f9ng ch\u1ee9a […]<\/p>\n","protected":false},"author":4,"featured_media":4410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4411"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4411\/revisions"}],"predecessor-version":[{"id":4413,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4411\/revisions\/4413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4410"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}