Joshua's Docs - CSS Troubleshooting Cheatsheet :)
Light

Centering

When in doubt, the "holy reference guide" - https://css-tricks.com/centering-css-complete-guide/

Side-by-side elements

Options:

  • Inline block
    #sibling-A {
    	width: 59%;
    	display: inline-block;
    }
    #sibling-B {
    	width: 40%;
    	display: inline-block;
    }
    • Note that there is a slight issue with inline-block; there is built in browser white-space between elements, so they should not actually add up to 100%
      • See this for details.
  • Offset + float
    #sibling-A {
    	width: 60%;
    	float: left;
    }
    #sibling-B {
    	width: 40%;
    	margin-left: 60%;
    }
  • Flex (not 100% support)
    .container {
    	display: flex;
    }
    .container #sibling-A {
    	width: 60%;
    }
    .container #sibling-B {
    	flex-grow: 1;
    }

Overflow Debugging

Unfortunately, there aren't a ton of tools to help with CSS debugging, and even less for overflow specifically.

If you have a newer version of Firefox, your DevTools might actually have a feature specifically for this 🤯! See this docs page, and this tweet.

One handy trick is to simply inject a style of something like the following, to help you visualize the space occupied by each element:

* {
	outline: 1px dashed red;
}

Other tips / things to try:

  • Using inspect element and hovering over nodes in the tree until you find the offending element
    • You can delete elements as you go, to verify that they are, or are not, causing overflow issues
  • Follow the steps / tips in this CSS-Tricks post: Finding/Fixing Unintended Body Overflow

Random CSS Troubleshooting and FAQs

  • Elements is not taking up full height specified (for example, <a style="height:50px;">Link</a>)
    • Change to display: inline-block;
  • Element is taking up full width of parent, instead of respecting width: auto;
    • Use display: inline-block; - you don't even need width to be specified with this
  • Side-by-side elements of the same height are not aligning vertically
    • Try making all display: inline-block, and then giving them all the same vertical align property, such as vertical-align: middle
  • How to force side-by-side elements to take up the same height? (aka equal height columns, or filling container)
    • Option: table display
      • Parent container: display: table; width: 100%;
      • Child: display: table-cell;
    • Option: flex (optimal)
      • Parent container: display: flex;
      • Child: flex: 1
      • Note: Counter-intuitive, but you can add flex-direction: column; to parent, to force vertical equal height rows, instead of horizontal equal height columns.
  • Negative margin-top has no effect
    • Try position: relative; and top -#px;
  • z-index has no effect
    • Z-index only affects elements that have a non-default position value. Try changing element to position: relative
  • Random blue line outline showing around inputs, buttons, etc.
    • This is generated by the browser, to help with accessibility on focused elements.
    • Please do not remove - see this
    • If you absolutely have to, you can set :focus {outline: 0} or have it more specifically target your element
      • You should replace it with at least some sort of visual indicator for focused
  • Text overflow ellipsis not working
    • Do you have {overflow: hidden, white-space: nowrap, text-overflow: ellipsis} on?
      • Try applying it to the lowest element containing the text - ideally the (div / span / p) that is directly containing the text
    • Is it inside a flex? Try adding min-width: 0 to the outermost element that is overflowing the parent
    • Is there no set width on the element containing the text?
      • Try setting a width (either px, %, or even calc(#%))
    • Are you trying to do this with a <span>? Try changing to <div>.
  • How to make an inline SVG be responsive?
    • Try adding a viewBox attribute on the SVG element
      • where the value is x, y, width, height
      • Example: viewBox="0, 0, 100, 200"
    • Relevant article: CSS Tricks: How to Scale SVG
  • How to compensate for a border adding width and height to a child?
    • You can use box-sizing: border-box, to have borders taken into account
  • Stretching text or elements with transform, or using transforms at all, seems to have no effect / is not working
  • The root html and/or <body> elements are refusing to take up the full browser height
    • If the usual html, body {height: 100vh;} isn't doing the trick for you, try also setting overflow: auto;
    • Lots of tips here
  • Flex loses / discards padding on the last child in a container that overflows
    • There are a few fancier solutions, but a nice go-to, which still harkens back to old-school CSS hacks, is using a pseudo element
      .container:last-child::after {
      	content: '';
      	min-width: 8px;
      }
Markdown Source Last Updated:
Fri May 28 2021 12:30:19 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 24 2019 01:12:38 GMT+0000 (Coordinated Universal Time)
© 2021 Joshua Tzucker, Built with Gatsby
Feedback