{"id":16265844,"url":"https://github.com/fuxingloh/css-horizontal-collapse-demo","last_synced_at":"2026-05-19T04:02:03.048Z","repository":{"id":78901665,"uuid":"327542546","full_name":"fuxingloh/css-horizontal-collapse-demo","owner":"fuxingloh","description":"Chrome Fixed It. - This used to be \"A demo of how CSS horizontal collapse can cause oddities in components rendered in the horizontal space.\"","archived":false,"fork":false,"pushed_at":"2021-01-08T08:13:19.000Z","size":1521,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-16T00:40:42.980Z","etag":null,"topics":["css","horizontal","horizontal-scrolling","lazy-loading","nuxt-components","vue","vue-horizontal","vuejs"],"latest_commit_sha":null,"homepage":"https://css-collapse-vue-horizontal.fuxing.dev/","language":"Vue","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fuxingloh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-07T07:57:52.000Z","updated_at":"2023-05-02T01:47:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"bdc8b333-5e04-4f44-807b-07b189941cb4","html_url":"https://github.com/fuxingloh/css-horizontal-collapse-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fuxingloh/css-horizontal-collapse-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fcss-horizontal-collapse-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fcss-horizontal-collapse-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fcss-horizontal-collapse-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fcss-horizontal-collapse-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fuxingloh","download_url":"https://codeload.github.com/fuxingloh/css-horizontal-collapse-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fuxingloh%2Fcss-horizontal-collapse-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271215037,"owners_count":24720098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","horizontal","horizontal-scrolling","lazy-loading","nuxt-components","vue","vue-horizontal","vuejs"],"created_at":"2024-10-10T17:20:52.247Z","updated_at":"2026-05-19T04:01:58.003Z","avatar_url":"https://github.com/fuxingloh.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Horizontal Collapse Demo\n\n### [https://css-collapse-vue-horizontal.fuxing.dev/](https://css-collapse-vue-horizontal.fuxing.dev/)\n\nCSS horizontal collapse can cause oddities in components rendered in the horizontal space.\nAn item get collapsed when there isn't any height. **\u0026lt;img\u0026gt;** causes collapse too.\n\n### Why?\n\nThe short answer for this is that elements with width but without height basically equate to no width.\nOnce the content becomes available, height will be given and therefore it start to occupy horizontal space.\nImages are loaded in an asynchronous fashion thus height available and factored in later.\nIn this example, flex is used and therefore 'align-items: stretch' is the default value.\nThus giving all items in the flex the same height.\nHowever, if index 3 is loaded before index 0; height will be given to index 3 first causing the scroll left\nposition to be in a unexpected position.\n\n## Build Setup\n\n```bash\n# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:3000\n$ npm run dev\n\n# build for production and launch server\n$ npm run build\n$ npm run start\n\n# generate static project\n$ npm run generate\n```\n\n## Caveat\n\nDemo examples written for [vue-horizontal](https://vue-horizontal.fuxing.dev).\n[Nuxt](https://nuxtjs.org/) was used for this micro-site, but the principles are mostly the same for all vue or css\nimplementation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuxingloh%2Fcss-horizontal-collapse-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuxingloh%2Fcss-horizontal-collapse-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuxingloh%2Fcss-horizontal-collapse-demo/lists"}