{"id":4398,"date":"2026-03-10T16:18:01","date_gmt":"2026-03-10T09:18:01","guid":{"rendered":"https:\/\/wpdesign.vn\/intrinsic-sizing-extrinsic-sizing-va-fit-content\/"},"modified":"2026-05-04T16:20:05","modified_gmt":"2026-05-04T09:20:05","slug":"intrinsic-sizing-extrinsic-sizing-va-fit-content","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/intrinsic-sizing-extrinsic-sizing-va-fit-content\/","title":{"rendered":"Intrinsic Sizing, Extrinsic Sizing V\u00e0 Fit-Content"},"content":{"rendered":"\n<p>S\u1ef1 ra \u0111\u1eddi c\u1ee7a CSS Flexible Box Layout (Flexbox) v\u00e0 CSS Grid Layout \u0111\u00e3 thay \u0111\u1ed5i ho\u00e0n to\u00e0n t\u01b0 duy n\u00e0y.<\/p>\n\n<h4 class=\"wp-block-heading\">1. Extrinsic Sizing: C\u01a1 ch\u1ebf \u00c1p \u0111\u1eb7t K\u00edch th\u01b0\u1edbc t\u1eeb Ngo\u1ea1i vi<\/h4>\n\n<h6 class=\"wp-block-heading\">1.1 \u0110\u1ecbnh ngh\u0129a K\u1ef9 thu\u1eadt<\/h6>\n\n<p><strong>Extrinsic Sizing<\/strong> l\u00e0 c\u01a1 ch\u1ebf m\u00e0 trong \u0111\u00f3 k\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi c\u00e1c t\u00e1c nh\u00e2n b\u00ean ngo\u00e0i ho\u1eb7c c\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ecbnh ngh\u0129a c\u1ee9ng, thay v\u00ec d\u1ef1a tr\u00ean n\u1ed9i dung m\u00e0 ph\u1ea7n t\u1eed \u0111\u00f3 ch\u1ee9a \u0111\u1ef1ng.<\/p>\n\n<p>Khi m\u1ed9t thu\u1ed9c t\u00ednh nh\u01b0 <code>width<\/code> ho\u1eb7c <code>height<\/code> \u0111\u01b0\u1ee3c g\u00e1n m\u1ed9t gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3, tr\u00ecnh duy\u1ec7t s\u1ebd coi \u0111\u00f3 l\u00e0 m\u1ed9t &#8220;r\u00e0ng bu\u1ed9c c\u1ee9ng&#8221; (hard constraint).<\/p>\n\n<h6 class=\"wp-block-heading\">1.2 C\u00e1c d\u1ea1ng bi\u1ec3u hi\u1ec7n<\/h6>\n\n<ul class=\"wp-block-list\">\n<li><strong>Gi\u00e1 tr\u1ecb Tuy\u1ec7t \u0111\u1ed1i (Absolute Units):<\/strong> <code>px<\/code>, <code>cm<\/code>, <code>pt<\/code>. V\u00ed d\u1ee5: <code>width: 500px<\/code>. Ph\u1ea7n t\u1eed s\u1ebd duy tr\u00ec k\u00edch th\u01b0\u1edbc n\u00e0y b\u1ea5t k\u1ec3 n\u1ed9i dung b\u00ean trong l\u00e0 m\u1ed9t k\u00fd t\u1ef1 hay m\u1ed9t b\u00e0i b\u00e1o d\u00e0i.  <\/li>\n\n\n\n<li><strong>Gi\u00e1 tr\u1ecb T\u01b0\u01a1ng \u0111\u1ed1i theo Container (Relative to Container):<\/strong> <code>%<\/code>, <code>vw<\/code>, <code>vh<\/code>. V\u00ed d\u1ee5: <code>width: 50%<\/code>. K\u00edch th\u01b0\u1edbc n\u00e0y ph\u1ee5 thu\u1ed9c ho\u00e0n to\u00e0n v\u00e0o Box Model c\u1ee7a ph\u1ea7n t\u1eed cha.  <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">1.3 Ph\u00e2n t\u00edch \u01afu v\u00e0 Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/h6>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u01afu \u0111i\u1ec3m:<\/strong> Cung c\u1ea5p kh\u1ea3 n\u0103ng ki\u1ec3m so\u00e1t tuy\u1ec7t \u0111\u1ed1i (Predictability). \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng cho c\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 c\u1ea5u tr\u00fac kh\u00f4ng \u0111\u1ed5i nh\u01b0 thanh \u0111i\u1ec1u h\u01b0\u1edbng (sidebar) c\u1ed1 \u0111\u1ecbnh ho\u1eb7c c\u00e1c slot qu\u1ea3ng c\u00e1o c\u00f3 k\u00edch th\u01b0\u1edbc chu\u1ea9n. <\/li>\n\n\n\n<li><strong>Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/strong> Thi\u1ebfu t\u00ednh linh ho\u1ea1t (Rigidity). N\u1ebfu n\u1ed9i dung b\u00ean trong l\u1edbn h\u01a1n k\u00edch th\u01b0\u1edbc \u00e1p \u0111\u1eb7t, hi\u1ec7n t\u01b0\u1ee3ng <strong>Overflow<\/strong> s\u1ebd x\u1ea3y ra, g\u00e2y v\u1ee1 b\u1ed1 c\u1ee5c ho\u1eb7c m\u1ea5t th\u00f4ng tin n\u1ebfu kh\u00f4ng \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1eb1ng thu\u1ed9c t\u00ednh <code>overflow<\/code>. <\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">2. Intrinsic Sizing: K\u00edch th\u01b0\u1edbc T\u1ef1 th\u00e2n v\u00e0 N\u1ed9i h\u00e0m<\/h4>\n\n<h6 class=\"wp-block-heading\">2.1 B\u1ea3n ch\u1ea5t c\u1ee7a Content-based Sizing<\/h6>\n\n<p>Ng\u01b0\u1ee3c l\u1ea1i v\u1edbi Extrinsic, <strong>Intrinsic Sizing<\/strong> cho ph\u00e9p n\u1ed9i dung (v\u0103n b\u1ea3n, h\u00ecnh \u1ea3nh, ho\u1eb7c c\u00e1c ph\u1ea7n t\u1eed con) &#8220;n\u00f3i&#8221; cho tr\u00ecnh duy\u1ec7t bi\u1ebft n\u00f3 c\u1ea7n bao nhi\u00eau kh\u00f4ng gian. CSS Intrinsic v\u00e0 Extrinsic Sizing Module Level 3 \u0111\u00e3 chu\u1ea9n h\u00f3a c\u00e1c t\u1eeb kh\u00f3a \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n h\u00e0nh vi n\u00e0y. <\/p>\n\n<h6 class=\"wp-block-heading\">2.2 Max-content: \u0110i\u1ec3m gi\u1edbi h\u1ea1n tr\u00ean<\/h6>\n\n<p><code>max-content<\/code> \u0111\u1ea1i di\u1ec7n cho k\u00edch th\u01b0\u1edbc l\u00fd t\u01b0\u1edfng nh\u1ea5t c\u1ee7a ph\u1ea7n t\u1eed n\u1ebfu n\u00f3 c\u00f3 kh\u00f4ng gian v\u00f4 h\u1ea1n.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>C\u01a1 ch\u1ebf:<\/strong> \u0110\u1ed1i v\u1edbi v\u0103n b\u1ea3n, n\u00f3 s\u1ebd tr\u1ea3i d\u00e0i tr\u00ean m\u1ed9t d\u00f2ng duy nh\u1ea5t, kh\u00f4ng th\u1ef1c hi\u1ec7n xu\u1ed1ng d\u00f2ng (soft wrap) tr\u1eeb khi g\u1eb7p th\u1ebb <code>&lt;br&gt;<\/code>.<\/li>\n\n\n\n<li><strong>\u1ee8ng d\u1ee5ng:<\/strong> Th\u01b0\u1eddng d\u00f9ng cho c\u00e1c ti\u00eau \u0111\u1ec1 ho\u1eb7c c\u00e1c h\u00e0ng trong b\u1ea3ng n\u01a1i b\u1ea1n mu\u1ed1n n\u1ed9i dung lu\u00f4n n\u1eb1m tr\u00ean m\u1ed9t d\u00f2ng.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">2.3 Min-content: \u0110i\u1ec3m gi\u1edbi h\u1ea1n d\u01b0\u1edbi<\/h6>\n\n<p><code>min-content<\/code> l\u00e0 k\u00edch th\u01b0\u1edbc nh\u1ecf nh\u1ea5t m\u00e0 ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u00e0 kh\u00f4ng g\u00e2y ra overflow ngo\u00e0i \u00fd mu\u1ed1n.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>C\u01a1 ch\u1ebf:<\/strong> Tr\u00ecnh duy\u1ec7t s\u1ebd th\u1ef1c hi\u1ec7n xu\u1ed1ng d\u00f2ng t\u1ea1i m\u1ecdi v\u1ecb tr\u00ed c\u00f3 th\u1ec3 (ng\u1eaft gi\u1eefa c\u00e1c t\u1eeb). Chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed l\u00fac n\u00e0y b\u1eb1ng chi\u1ec1u r\u1ed9ng c\u1ee7a t\u1eeb d\u00e0i nh\u1ea5t ho\u1eb7c ph\u1ea7n t\u1eed con c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn nh\u1ea5t. <\/li>\n\n\n\n<li><strong>\u1ee8ng d\u1ee5ng:<\/strong> T\u1ea1o c\u00e1c c\u1ed9t v\u0103n b\u1ea3n h\u1eb9p ho\u1eb7c c\u00e1c layout d\u1ea1ng &#8220;Float&#8221; bao quanh n\u1ed9i dung.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">2.4 Auto: Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh th\u00f4ng minh<\/h6>\n\n<p>Gi\u00e1 tr\u1ecb <code>auto<\/code> th\u01b0\u1eddng b\u1ecb nh\u1ea7m l\u1eabn v\u1edbi c\u00e1c t\u1eeb kh\u00f3a intrinsic kh\u00e1c. Th\u1ef1c t\u1ebf, <code>auto<\/code> l\u00e0 m\u1ed9t c\u01a1 ch\u1ebf ph\u1ee9c t\u1ea1p h\u01a1n: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Trong Block Layout: N\u00f3 c\u00f3 xu h\u01b0\u1edbng chi\u1ebfm 100% chi\u1ec1u r\u1ed9ng c\u1ee7a cha (Extrinsic).<\/li>\n\n\n\n<li>Trong Flexbox\/Grid: N\u00f3 th\u01b0\u1eddng ho\u1ea1t \u0111\u1ed9ng nh\u01b0 <code>min-content<\/code> ho\u1eb7c d\u1ef1a tr\u00ean <code>flex-basis<\/code>.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">3. Fit-Content: Thu\u1eadt to\u00e1n \u0110i\u1ec1u ti\u1ebft Linh ho\u1ea1t<\/h4>\n\n<h6 class=\"wp-block-heading\">3.1 C\u00f4ng th\u1ee9c t\u00ednh to\u00e1n<\/h6>\n\n<p><code>fit-content<\/code> kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t gi\u00e1 tr\u1ecb c\u1ed1 \u0111\u1ecbnh m\u00e0 l\u00e0 m\u1ed9t h\u00e0m \u0111i\u1ec1u ti\u1ebft. V\u1ec1 m\u1eb7t logic, tr\u00ecnh duy\u1ec7t t\u00ednh to\u00e1n d\u1ef1a tr\u00ean c\u00f4ng th\u1ee9c: <\/p>\n\n<p>$$Size = \\max(min\\text{-}content, \\min(max\\text{-}content, available\\ space))$$<\/p>\n\n<p>\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0:<\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li>N\u00f3 s\u1ebd c\u1ed1 g\u1eafng \u0111\u1ea1t \u0111\u1ebfn <code>max-content<\/code> \u0111\u1ec3 n\u1ed9i dung hi\u1ec3n th\u1ecb \u0111\u1eb9p nh\u1ea5t.<\/li>\n\n\n\n<li>N\u1ebfu kh\u00f4ng gian c\u1ee7a container (available space) nh\u1ecf h\u01a1n <code>max-content<\/code>, n\u00f3 s\u1ebd co l\u1ea1i theo container.<\/li>\n\n\n\n<li>Tuy nhi\u00ean, n\u00f3 s\u1ebd kh\u00f4ng bao gi\u1edd co nh\u1ecf h\u01a1n <code>min-content<\/code>.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">3.2 S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa fit-content (keyword) v\u00e0 fit-content(value)<\/h6>\n\n<ul class=\"wp-block-list\">\n<li><strong><code>width: fit-content<\/code><\/strong>: S\u1eed d\u1ee5ng to\u00e0n b\u1ed9 kh\u00f4ng gian kh\u1ea3 d\u1ee5ng nh\u01b0ng kh\u00f4ng v\u01b0\u1ee3t qu\u00e1 <code>max-content<\/code>.<\/li>\n\n\n\n<li><strong><code>width: fit-content(500px)<\/code><\/strong>: T\u01b0\u01a1ng t\u1ef1 nh\u01b0 tr\u00ean, nh\u01b0ng b\u1ed5 sung th\u00eam m\u1ed9t ng\u01b0\u1ee1ng ch\u1eb7n tr\u00ean l\u00e0 500px thay v\u00ec ch\u1ec9 d\u1ef1a v\u00e0o container.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">4. \u1ee8ng d\u1ee5ng trong H\u1ec7 th\u1ed1ng Layout Hi\u1ec7n \u0111\u1ea1i<\/h4>\n\n<h6 class=\"wp-block-heading\">4.1 Vai tr\u00f2 trong CSS Grid<\/h6>\n\n<p>Grid l\u00e0 n\u01a1i Intrinsic Sizing ph\u00e1t huy s\u1ee9c m\u1ea1nh t\u1ed1i \u0111a.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Track Sizing:<\/strong> <code>grid-template-columns: min-content 1fr max-content;<\/code> t\u1ea1o ra m\u1ed9t c\u1ed9t c\u1ef1c h\u1eb9p, m\u1ed9t c\u1ed9t linh ho\u1ea1t v\u00e0 m\u1ed9t c\u1ed9t m\u1edf r\u1ed9ng theo n\u1ed9i dung.<\/li>\n\n\n\n<li><strong>H\u00e0m <code>repeat()<\/code>:<\/strong> K\u1ebft h\u1ee3p <code>auto-fill<\/code> v\u00e0 <code>minmax(intrinsic, extrinsic)<\/code> \u0111\u1ec3 t\u1ea1o ra c\u00e1c grid t\u1ef1 \u0111\u1ed9ng th\u00edch nghi m\u00e0 kh\u00f4ng c\u1ea7n Media Queries.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">4.2 Vai tr\u00f2 trong Flexbox<\/h6>\n\n<p>Thu\u1eadt to\u00e1n Flexbox d\u1ef1a tr\u00ean &#8220;Flex Basis&#8221;. Khi <code>flex-basis: auto<\/code>, tr\u00ecnh duy\u1ec7t s\u1ebd nh\u00ecn v\u00e0o Intrinsic Size c\u1ee7a n\u1ed9i dung \u0111\u1ec3 b\u1eaft \u0111\u1ea7u t\u00ednh to\u00e1n vi\u1ec7c ph\u00e2n b\u1ed5 kh\u00f4ng gian th\u1eeba (flex-grow) ho\u1eb7c kh\u00f4ng gian thi\u1ebfu (flex-shrink). <\/p>\n\n<h4 class=\"wp-block-heading\">5. Ph\u00e2n t\u00edch So s\u00e1nh v\u00e0 Ma tr\u1eadn L\u1ef1a ch\u1ecdn<\/h4>\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>Extrinsic (Fixed\/%)<\/strong><\/td><td><strong>Intrinsic (Min\/Max)<\/strong><\/td><td><strong>Fit-Content<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Ngu\u1ed3n quy\u1ebft \u0111\u1ecbnh<\/strong><\/td><td>Container \/ Developer<\/td><td>N\u1ed9i dung b\u00ean trong<\/td><td>S\u1ef1 giao thoa gi\u1eefa c\u1ea3 hai<\/td><\/tr><tr><td><strong>Kh\u1ea3 n\u0103ng Responsive<\/strong><\/td><td>Th\u1ea5p (c\u1ea7n Media Queries)<\/td><td>Cao (t\u1ef1 \u0111\u1ed9ng)<\/td><td>R\u1ea5t cao<\/td><\/tr><tr><td><strong>R\u1ee7i ro Overflow<\/strong><\/td><td>Cao<\/td><td>Th\u1ea5p (v\u1edbi max-content)<\/td><td>R\u1ea5t th\u1ea5p<\/td><\/tr><tr><td><strong>Ki\u1ec3m so\u00e1t th\u1ecb gi\u00e1c<\/strong><\/td><td>Tuy\u1ec7t \u0111\u1ed1i<\/td><td>T\u01b0\u01a1ng \u0111\u1ed1i<\/td><td>C\u00e2n b\u1eb1ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h4 class=\"wp-block-heading\">6. C\u00e1c l\u1ed7i ph\u1ed5 bi\u1ebfn v\u00e0 Gi\u1ea3i ph\u00e1p t\u1ed1i \u01b0u<\/h4>\n\n<h6 class=\"wp-block-heading\">6.1 L\u1ed7i &#8220;Text Squishing&#8221; v\u1edbi min-content<\/h6>\n\n<p>Khi s\u1eed d\u1ee5ng <code>min-content<\/code> cho c\u00e1c container ch\u1ee9a v\u0103n b\u1ea3n d\u00e0i, n\u1ed9i dung s\u1ebd b\u1ecb b\u1ebb v\u1ee5n th\u00e0nh c\u00e1c c\u1ed9t d\u1ecdc kh\u00f3 \u0111\u1ecdc.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Gi\u1ea3i ph\u00e1p:<\/strong> S\u1eed d\u1ee5ng <code>min-content<\/code> k\u1ebft h\u1ee3p v\u1edbi <code>min-width<\/code> \u0111\u1ec3 gi\u1eef m\u1ed9t ng\u01b0\u1ee1ng hi\u1ec3n th\u1ecb t\u1ed1i thi\u1ec3u cho tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">6.2 L\u1ed7i &#8220;Overflow&#8221; v\u1edbi max-content<\/h6>\n\n<p>S\u1eed d\u1ee5ng <code>max-content<\/code> tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng th\u01b0\u1eddng d\u1eabn \u0111\u1ebfn vi\u1ec7c ph\u1ea7n t\u1eed \u0111\u1ea9y r\u1ed9ng h\u01a1n chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh (Horizontal Scroll).<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Gi\u1ea3i ph\u00e1p:<\/strong> Lu\u00f4n \u01b0u ti\u00ean <code>fit-content<\/code> ho\u1eb7c <code>width: 100%; max-width: max-content<\/code>.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">6.3 Hi\u1ec3u sai v\u1ec1 &#8220;Available Space&#8221;<\/h6>\n\n<p>Nhi\u1ec1u ng\u01b0\u1eddi l\u1ea7m t\u01b0\u1edfng <code>fit-content<\/code> lu\u00f4n ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nhau. Tuy nhi\u00ean, n\u1ebfu container cha kh\u00f4ng c\u00f3 chi\u1ec1u r\u1ed9ng x\u00e1c \u0111\u1ecbnh (v\u00ed d\u1ee5: m\u1ed9t flex-item kh\u00e1c), <code>fit-content<\/code> c\u00f3 th\u1ec3 s\u1ee5p \u0111\u1ed5 v\u1ec1 <code>min-content<\/code>. <\/p>\n\n<h4 class=\"wp-block-heading\">7. Chi\u1ebfn l\u01b0\u1ee3c Tri\u1ec3n khai Th\u1ef1c t\u1ebf<\/h4>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>S\u1eed d\u1ee5ng Extrinsic Sizing cho Khung s\u01b0\u1eddn (Shell):<\/strong> C\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0 Wrapper ch\u00ednh, Sidebar, Header n\u00ean c\u00f3 k\u00edch th\u01b0\u1edbc d\u1ef1a tr\u00ean Viewport ho\u1eb7c Layout t\u1ed5ng th\u1ec3.<\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng Intrinsic Sizing cho Th\u00e0nh ph\u1ea7n Nguy\u00ean t\u1eed (Atoms):<\/strong> C\u00e1c n\u00fat b\u1ea5m (Buttons), th\u1ebb (Tags), huy hi\u1ec7u (Badges) n\u00ean \u0111\u1ec3 n\u1ed9i dung quy\u1ebft \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh \u0111a ng\u00f4n ng\u1eef (v\u0103n b\u1ea3n ti\u1ebfng \u0110\u1ee9c th\u01b0\u1eddng d\u00e0i h\u01a1n ti\u1ebfng Anh).<\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng Fit-content cho C\u00e1c kh\u1ed1i n\u1ed9i dung \u0111\u1ed9c l\u1eadp:<\/strong> C\u00e1c tooltip, dropdown menu, ho\u1eb7c c\u00e1c h\u1ed9p tho\u1ea1i th\u00f4ng b\u00e1o n\u00ean d\u00f9ng <code>fit-content<\/code> \u0111\u1ec3 v\u1eeba v\u1eb7n v\u1edbi th\u00f4ng \u0111i\u1ec7p m\u00e0 kh\u00f4ng chi\u1ebfm d\u1ee5ng kh\u00f4ng gian th\u1eeba c\u1ee7a m\u00e0n h\u00ecnh.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">8. K\u1ebft lu\u1eadn<\/h4>\n\n<p>S\u1ef1 chuy\u1ec3n d\u1ecbch t\u1eeb Extrinsic Sizing sang Intrinsic Sizing \u0111\u00e1nh d\u1ea5u b\u01b0\u1edbc ti\u1ebfn t\u1eeb thi\u1ebft k\u1ebf &#8220;t\u0129nh&#8221; sang thi\u1ebft k\u1ebf &#8220;th\u00edch nghi h\u1ec7 th\u1ed1ng&#8221;. Vi\u1ec7c l\u00e0m ch\u1ee7 <code>min-content<\/code>, <code>max-content<\/code> v\u00e0 <code>fit-content<\/code> kh\u00f4ng ch\u1ec9 gi\u00fap m\u00e3 ngu\u1ed3n CSS g\u1ecdn nh\u1eb9 h\u01a1n (gi\u1ea3m b\u1edbt Media Queries) m\u00e0 c\u00f2n t\u1ea1o ra c\u00e1c giao di\u1ec7n c\u00f3 kh\u1ea3 n\u0103ng t\u1ef1 ph\u1ee5c h\u1ed3i (resilient UI) tr\u01b0\u1edbc nh\u1eefng thay \u0111\u1ed5i b\u1ea5t ng\u1edd c\u1ee7a d\u1eef li\u1ec7u n\u1ed9i dung. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>S\u1ef1 ra \u0111\u1eddi c\u1ee7a CSS Flexible Box Layout (Flexbox) v\u00e0 CSS Grid Layout \u0111\u00e3 thay \u0111\u1ed5i ho\u00e0n to\u00e0n t\u01b0 duy [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":4397,"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-4398","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\/4398","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=4398"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4398\/revisions"}],"predecessor-version":[{"id":4399,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4398\/revisions\/4399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4397"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}