{"id":7207,"date":"2021-07-30T12:58:34","date_gmt":"2021-07-30T12:58:34","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=7207"},"modified":"2022-04-13T16:34:32","modified_gmt":"2022-04-13T16:34:32","slug":"css-overflow-what-it-is-how-it-works","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/","title":{"rendered":"CSS Overflow: What It Is & How It Works?"},"content":{"rendered":"\n

Overflow<\/strong>–<\/h2>\n\n\n\n

This property is used to define what happens if content overflows an element’s box. It means it will define whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. This property only works for block elements with a specified height. We can set this property to visible<\/em> (default),<\/em> scroll, hidden, auto<\/em>.<\/p>\n\n\n\n

Ex:-<\/strong><\/p>\n\n\n\n

p { overflow: hidden; }<\/strong><\/p>\n\n\n\n

\"Diagnosis:<\/figure>\n\n\n\n

Overflow-x<\/strong>–<\/h2>\n\n\n\n

This property is used to define whether to clip content, render a scroll bar, or display overflow content of a block-level element when it overflows at the left and right edges. We can set this property to visible<\/em> (default), hidden, scroll, auto<\/em>.<\/p>\n\n\n\n

Ex: –<\/strong><\/p>\n\n\n\n

p { overflow-x: hidden; }<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Overflow-y<\/strong>–<\/h2>\n\n\n\n

This property is used to define whether to clip content, render a scroll bar, or display overflow content of a block-level element when it overflows at the top and bottom edges. We can set this property to visible<\/em> (default),<\/em> hidden, scroll, auto<\/em>.<\/p>\n\n\n\n

Ex: –<\/strong><\/p>\n\n\n\n

p { overflow-y: hidden; }<\/strong><\/p>\n\n\n\n

<\/figure>\n","protected":false},"excerpt":{"rendered":"

Overflow– This property is used to define what happens if content overflows an element’s box. It means it will define […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5309],"tags":[5134,5723,5756,5753,5755,5754],"class_list":["post-7207","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-hidden","tag-none","tag-overflow","tag-overflow-y","tag-overflow0x"],"yoast_head":"\nCSS Overflow: What It Is & How It Works? - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Overflow: What It Is & How It Works? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"Overflow– This property is used to define what happens if content overflows an element’s box. It means it will define […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-30T12:58:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:34:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/i.imgur.com\/lk3Qk.png\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"CSS Overflow: What It Is & How It Works?\",\"datePublished\":\"2021-07-30T12:58:34+00:00\",\"dateModified\":\"2022-04-13T16:34:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/\"},\"wordCount\":174,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/i.imgur.com\\\/lk3Qk.png\",\"keywords\":[\"css\",\"hidden\",\"none\",\"overflow\",\"overflow-y\",\"overflow0x\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/\",\"name\":\"CSS Overflow: What It Is & How It Works? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/i.imgur.com\\\/lk3Qk.png\",\"datePublished\":\"2021-07-30T12:58:34+00:00\",\"dateModified\":\"2022-04-13T16:34:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#primaryimage\",\"url\":\"http:\\\/\\\/i.imgur.com\\\/lk3Qk.png\",\"contentUrl\":\"http:\\\/\\\/i.imgur.com\\\/lk3Qk.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/css-overflow-what-it-is-how-it-works\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Overflow: What It Is & How It Works?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Overflow: What It Is & How It Works? - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/","og_locale":"en_US","og_type":"article","og_title":"CSS Overflow: What It Is & How It Works? - scmGalaxy","og_description":"Overflow– This property is used to define what happens if content overflows an element’s box. It means it will define […]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/","og_site_name":"scmGalaxy","article_published_time":"2021-07-30T12:58:34+00:00","article_modified_time":"2022-04-13T16:34:32+00:00","og_image":[{"url":"http:\/\/i.imgur.com\/lk3Qk.png","type":"","width":"","height":""}],"author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"CSS Overflow: What It Is & How It Works?","datePublished":"2021-07-30T12:58:34+00:00","dateModified":"2022-04-13T16:34:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/"},"wordCount":174,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#primaryimage"},"thumbnailUrl":"http:\/\/i.imgur.com\/lk3Qk.png","keywords":["css","hidden","none","overflow","overflow-y","overflow0x"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/","name":"CSS Overflow: What It Is & How It Works? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#primaryimage"},"thumbnailUrl":"http:\/\/i.imgur.com\/lk3Qk.png","datePublished":"2021-07-30T12:58:34+00:00","dateModified":"2022-04-13T16:34:32+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#primaryimage","url":"http:\/\/i.imgur.com\/lk3Qk.png","contentUrl":"http:\/\/i.imgur.com\/lk3Qk.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/css-overflow-what-it-is-how-it-works\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"CSS Overflow: What It Is & How It Works?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=7207"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7207\/revisions"}],"predecessor-version":[{"id":7210,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7207\/revisions\/7210"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=7207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=7207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}