https://github.com/fuxingloh/css-horizontal-collapse-demo
Chrome Fixed It. - This used to be "A demo of how CSS horizontal collapse can cause oddities in components rendered in the horizontal space."
https://github.com/fuxingloh/css-horizontal-collapse-demo
css horizontal horizontal-scrolling lazy-loading nuxt-components vue vue-horizontal vuejs
Last synced: about 1 month ago
JSON representation
Chrome Fixed It. - This used to be "A demo of how CSS horizontal collapse can cause oddities in components rendered in the horizontal space."
- Host: GitHub
- URL: https://github.com/fuxingloh/css-horizontal-collapse-demo
- Owner: fuxingloh
- Created: 2021-01-07T07:57:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-08T08:13:19.000Z (over 4 years ago)
- Last Synced: 2025-04-02T00:49:50.668Z (about 2 months ago)
- Topics: css, horizontal, horizontal-scrolling, lazy-loading, nuxt-components, vue, vue-horizontal, vuejs
- Language: Vue
- Homepage: https://css-collapse-vue-horizontal.fuxing.dev/
- Size: 1.45 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Horizontal Collapse Demo
### [https://css-collapse-vue-horizontal.fuxing.dev/](https://css-collapse-vue-horizontal.fuxing.dev/)
CSS horizontal collapse can cause oddities in components rendered in the horizontal space.
An item get collapsed when there isn't any height. **<img>** causes collapse too.
### Why?
The short answer for this is that elements with width but without height basically equate to no width.
Once the content becomes available, height will be given and therefore it start to occupy horizontal space.
Images are loaded in an asynchronous fashion thus height available and factored in later.
In this example, flex is used and therefore 'align-items: stretch' is the default value.
Thus giving all items in the flex the same height.
However, if index 3 is loaded before index 0; height will be given to index 3 first causing the scroll left
position to be in a unexpected position.
## Build Setup
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate
```
## Caveat
Demo examples written for [vue-horizontal](https://vue-horizontal.fuxing.dev).
[Nuxt](https://nuxtjs.org/) was used for this micro-site, but the principles are mostly the same for all vue or css
implementation.