A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

By Philip Walton
Last update: Dec 24, 2022
Comments: 17

Solved by Flexbox

Viewing the Site Locally

The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.

# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox

# Install the dependencies
npm install

# Build and serve the site at http://localhost:4000
npm start

This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start:

npm start -- -p 8080

In addition to building the site and serving it locally, this will also listen for any changes and rebuild the site as needed. This allows you to play around with the code, refresh the browser, and see your changes instantly.

Translations

The following translations have been graciously provided by the community:

Please note that translations are unofficial and may be inaccurate or out of date. To submit your own translation, please submit a pull request or open an issue and link to your translated content.

Github

https://github.com/philipwalton/solved-by-flexbox

Comments(17)

1

Sticky footer doesn't work at all in IE11 and not well in Chrome
Took the demo code here: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and observed a couple of things:
- The footer is not pushed down in IE11 and overlays the body section
- In Chrome and Firefox, scrollbar is drawn unnecessarily (part of the footer is under the fold)
2

File to import not found or unreadable: CSS:normalize-css/normalize

Each time I do rake preview, it also returns this message regarding some of the CSS files not loading:

"Configuration file: /Users/akuhar/Development/solved-by-flexbox/_config.yml Source: /Users/akuhar/Development/solved-by-flexbox Destination: /Users/akuhar/Development/solved-by-flexbox/_site Generating... >>> Change detected at 15:52:45 to: style.scss error _sass/style.scss (Line 3: File to import not found or unreadable: CSS:normalize-css/normalize. Load paths: /Users/akuhar/Development/solved-by-flexbox/_sass /Users/akuhar/.rvm/gems/ruby-2.0.0-p353/gems/compass-0.12.2/frameworks/blueprint/stylesheets /Users/akuhar/.rvm/gems/ruby-2.0.0-p353/gems/compass-0.12.2/frameworks/compass/stylesheets Sass::CssImporter::Importer(/Users/akuhar/Development/solved-by-flexbox/bower_components) Compass::SpriteImporter) create css/style.css"

When viewing localhost:4000, the site loads, but none of the CSS has loaded with it. Has this happened to anybody else?

Also, my OS is Mavericks (10.9.1) -- I've ran into and seen a number of issues regarding Mavericks and Ruby, so maybe that's part of the problem as well.
3

Grid - Given CSS and demo's CSS do not tally

I'm really puzzled by how to use your grid system with the styles given on this page: http://philipwalton.github.io/solved-by-flexbox/demos/grids/.

Upon inspection of your demo, they are using a different set of CSS styles.
4

Add values for flex-shrink and flex-basis to sticky footer example code.

The sticky footer example should include explicit values for flex-shrink and flex-basis, as the default values in some browsers cause the content of the main section of the site to be cut-off.
5

no -webkit- prefix
for some reason the github pages branch's style.css has all the necessary -webkit- prefixes for the flexbox to function properly in safari, etc. but your master's scss files show no prefixing and the only website that your grid system functions properly on my local repo is chrome. where did you get the prefixes from?

for example this is `.Aligner' on your ghpages repo
```
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 24em;
```
And this is the same class in your master repo
```
display: flex;
align-items: center;
justify-content: center;
height: 24em; 
```
i could replicate the features by handcoding but I know it would help more people if we resolved the issue here.
6

sticky-footer in IE + a few extras for #28
Hi Philip,

So here’s a PR with a possible fix on the “sticky footer” IE behaviour regarding issue #28.

The fix is specified in commit cdfade53413b43a6e0124282d2e0e0ba774d610f.

There are some few of extras too, including:
- some utf8 fixes I had loads of outfit problems running this site locally
- .bowerrc file I had the bower components installed in components/ instead of bower_components/ adding a .bowerrc fixes this issue
Let me know what you think.
7

issue with grid's gutter

any grid row container cannot be styled properly, as the negative top margin messes up the area taken by that element - just give the container a border or background
8

Requirements for fixed footer

I've spent 3 hours trying to make a fixed footer following your directions to the letter. Making it was simple enough, but the problem arose when the window was resized. The footer would not follow the bottom of the window if the window height was increased or decreased. However, on refresh, it would move to its appropriate position on refresh.

In _bass.scss you have html {height: 100%;} stated explicitly. This is crucial to the flexbox layout performing as requested, for the sticky footer example especially. I would submit my own pull request but I'm not on my git machine. If needed I can add to the CSS code to include the new html height requirement to the sticky footer page.
9

Holy Graid Layout advertisement area position when the article area has just a few words

I tried your layout and it looks very good. However when the content area is not multi-line (Just for example ten words) then I see the advertisement area does not stick to the right of the page.

Is there a way that you could make the advertisement area stick to the right when the content area is small and the screen width large? I think this is very important for people who have pages that do not have much content.
10

IE10/11 solutions seem to cause several side-effects
I have been trying to make height: 100% work for quite some time now - unfortunately - too many problems, especially if content is more than the visible fold.

Compared your use case with mine, tried to simplify the layout by removing as many elements in the main content area as possible, nothing seems to work.

Ended up using
```
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  // IE10+ only styles here. 
  .main-content { min-height: 75vh; } 
}
```
it's definitely not great, but it's better than the footer jumping in the middle of the screen.. and height: 100% adds way too many side-effects for it to be a viable solution.
11

the sticky footer example only works because you have html {height: 100%;}

having min-height: 100%; instead of min-height: 100vh; only works in current chrome because you set html { height: 100%; }

This should be documented as requirement.

Site { display: flex; min-height: 100%; flex-direction: column; }
12

Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes

Sourced from decode-uri-component's releases.
v0.2.2
- Prevent overwriting previously decoded tokens 980e0bf
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1
- Switch to GitHub workflows 76abc93
- Fix issue where decode throws - fixes #6 746ca5d
- Update license (#1) 486d7e2
- Tidelift tasks a650457
- Meta tweaks 66e1c28
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1
Commits
- a0eea46 0.2.2
- 980e0bf Prevent overwriting previously decoded tokens
- 3c8a373 0.2.1
- 76abc93 Switch to GitHub workflows
- 746ca5d Fix issue where decode throws - fixes #6
- 486d7e2 Update license (#1)
- a650457 Tidelift tasks
- 66e1c28 Meta tweaks
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
13

Bump terser from 5.5.1 to 5.14.2
Bumps terser from 5.5.1 to 5.14.2.
Changelog

Sourced from terser's changelog.
v5.14.2
- Security fix for RegExps that should not be evaluated (regexp DDOS)
- Source maps improvements (#1211)
- Performance improvements in long property access evaluation (#1213)
v5.14.1
- keep_numbers option added to TypeScript defs (#1208)
- Fixed parsing of nested template strings (#1204)
v5.14.0
- Switched to @jridgewell/source-map for sourcemap generation (#1190, #1181)
- Fixed source maps with non-terminated segments (#1106)
- Enabled typescript types to be imported from the package (#1194)
- Extra DOM props have been added (#1191)
- Delete the AST while generating code, as a means to save RAM
v5.13.1
- Removed self-assignments (varname=varname) (closes #1081)
- Separated inlining code (for inlining things into references, or removing IIFEs)
- Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)
v5.13.0
- All calls to eval() were removed (#1171, #1184)
- source-map was updated to 0.8.0-beta.0 (#1164)
- NavigatorUAData was added to domprops to avoid property mangling (#1166)
v5.12.1
- Fixed an issue with function definitions inside blocks (#1155)
- Fixed parens of new in some situations (closes #1159)
v5.12.0
- TERSER_DEBUG_DIR environment variable
- @copyright comments are now preserved with the comments="some" option (#1153)
v5.11.0
- Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
- acorn is now a regular dependency
v5.10.0
- Massive optimization to max_line_len (#1109)
- Basic support for import assertions
- Marked ES2022 Object.hasOwn as a pure function
- Fix delete optional?.property
- New CI/CD pipeline with github actions (#1057)
... (truncated)
Commits
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
14

Bump copy-props from 2.0.4 to 2.0.5
Bumps copy-props from 2.0.4 to 2.0.5.
Release notes

Sourced from copy-props's releases.
2.0.5

Fix
- Avoids prototype pollution (#7)
Doc
- Update license years.
- Transfer ownership to Gulp Team (#6)
Build
- Update dependencies: each-props (>=1.3.2), is-plain-object (>=5.0.0).
Test
- Expand test versions to v11〜v14.
Changelog

Sourced from copy-props's changelog.
Changelog

3.0.1 (2021-10-31)

Bug Fixes
- ci: Rename prettierignore typo & avoid formatting web (192badf)
- Update dependencies (ba8a51c)
3.0.0 (2021-09-25)

⚠ BREAKING CHANGES
- Normalize repository, dropping node <10.13 support (#8)
Miscellaneous Chores
- Normalize repository, dropping node <10.13 support (#8) (85b1165)
Commits
- 40b7974 2.0.5
- 2c738f5 Fix: Avoids prototype pollution (#7)
- 4cac863 Merge: Transfer ownership to Gulp Team (#6)
- 54a791d Doc: Transfer ownership to Gulp Team
- 196fc9e Merge: Update dependencies and expand ci test versions (#5)
- e89907f Test: Update npm to v4 when nodejs is v5 because of npm install error.
- e970322 Test: Run coveralls when nodejs >= 6 because of its supports
- 063e534 Test: Add nodejs v11-v14 into ci test versions
- 72270af Doc: Update license years
- f60b928 Build: Update versions of dependencies
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
15

Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
- 7efb22a 1.2.6
- ef88b93 security notice for additional prototype pollution issue
- c2b9819 isConstructorOrProto adapted from PR
- bc8ecee test from prototype pollution PR
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
16

Bump nanoid from 3.1.20 to 3.2.0
Bumps nanoid from 3.1.20 to 3.2.0.
Changelog

Sourced from nanoid's changelog.
Change Log

This project adheres to Semantic Versioning.

3.2
- Added --size and --alphabet arguments to binary (by Vitaly Baev).
3.1.32
- Reduced async exports size (by Artyom Arutyunyan).
- Moved from Jest to uvu (by Vitaly Baev).
3.1.31
- Fixed collision vulnerability on object in size (by Artyom Arutyunyan).
3.1.30
- Reduced size for project with brotli compression (by Anton Khlynovskiy).
3.1.29
- Reduced npm package size.
3.1.28
- Reduced npm package size.
3.1.27
- Cleaned dependencies from development tools.
3.1.26
- Improved performance (by Eitan Har-Shoshanim).
- Reduced npm package size.
3.1.25
- Fixed browserify support.
3.1.24
- Fixed browserify support (by Artur Paikin).
3.1.23
- Fixed esbuild support.
3.1.22
- Added default and browser.default to package.exports.
3.1.21
- Reduced npm package size.
Commits
- 23b1369 Release 3.2 version
- 967788e Remove TS test tools
- 27eaa90 Simplify new binary tool
- a9d9123 Update dependencies
- 32b9bda Allows passing size or custom alphabet via cli as args (#334)
- 246d5f8 Update vite
- afdf9c9 doc: Fixed Typo (#335)
- 90a446f Update benchmark results
- 8ba2319 bench: add @napi-rs/uuid v4 (#333)
- f425778 Release 3.1.32 version
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
17

Bump shelljs from 0.8.4 to 0.8.5
Bumps shelljs from 0.8.4 to 0.8.5.

Release notes

Sourced from shelljs's releases.

v0.8.5

This was a small security fix for #1058.
Commits
- 70668a4 0.8.5
- d919d22 fix(exec): lockdown file permissions (#1060)
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

Solved by Flexbox

Viewing the Site Locally

Translations

Github

Comments(17)

Sticky footer doesn't work at all in IE11 and not well in Chrome

File to import not found or unreadable: CSS:normalize-css/normalize

Grid - Given CSS and demo's CSS do not tally

Add values for flex-shrink and flex-basis to sticky footer example code.

no -webkit- prefix

sticky-footer in IE + a few extras for #28

issue with grid's gutter

Requirements for fixed footer

Holy Graid Layout advertisement area position when the article area has just a few words

IE10/11 solutions seem to cause several side-effects

the sticky footer example only works because you have html {height: 100%;}

Bump decode-uri-component from 0.2.0 to 0.2.2

v0.2.2

v0.2.1

Bump terser from 5.5.1 to 5.14.2

v5.14.2

v5.14.1

v5.14.0

v5.13.1

v5.13.0

v5.12.1

v5.12.0

v5.11.0

v5.10.0

Bump copy-props from 2.0.4 to 2.0.5

2.0.5

Fix

Doc

Build

Test

Changelog

3.0.1 (2021-10-31)

Bug Fixes

3.0.0 (2021-09-25)

⚠ BREAKING CHANGES

Miscellaneous Chores

Bump minimist from 1.2.5 to 1.2.6

Bump nanoid from 3.1.20 to 3.2.0

Change Log

3.2

3.1.32

3.1.31

3.1.30

3.1.29

3.1.28

3.1.27

3.1.26

3.1.25

3.1.24

3.1.23

3.1.22

3.1.21

Bump shelljs from 0.8.4 to 0.8.5

v0.8.5

Popular Tag

Related