Joshua's Docs - CSS Troubleshooting Cheatsheet :)

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;
  • Child element - 100% height has no effect / is not working
    • For percentage based height to work, all the ancestors / parents have to have a height value set
  • Child element is not respecting 100% height or 100% max-height, and is overflowing the parent. This especially tends to happen with images (img)
    • On the child element, use inherit as the max-width or max-height (SO)
  • 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;
      • Children: flex: 1
        • Or
      • Note: Counter-intuitive, but you can add flex-direction: column; to parent, to force vertical equal height rows, instead of horizontal equal height columns.
  • How to force stacked adjacent elements (i.e., they share a bottom and top), to take up the same width (aka equal width rows)
    • Option: flex:
      • Use flex-basis: 0 on children
  • 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>.
    • StackOverflow for multi-line overflow ellipsis
  • 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 pass through a color to an SVG, inherit fill colors / allow user defined colors?
    • Use currentcolor, but caveats from this also apply
  • 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;
      }
  • How do I determine the default / root / base font size (e.g., what REM is relative to)?
    • The default browser font-size is usually 16px
    • Quick snippet: getComputedStyle(document.querySelector(':root')).fontSize
  • How do I add spacing between a collection of items, but not prior to the first, or after the last? I.e., only adding space between adjacent items?
    • You could use :nth-child(1n+2) to target all items after the first
      • Example: ul li:nth-child(1n+2) { margin-top: 8px; }
    • If the container is a Flexbox, you could use:
      • Best: gap property, but this is a newer property and not supported in IE
      • Approaches from this StackOverflow
    • You could use CSS Grid, for more controlled spacing
  • How to add a border around an element, without taking up space in the flow and causing issues with padding / margins / etc.?
    • Use the outline css property instead of border
  • aspect-ratio is not working
    • Make sure you don't have something interfering with an auto width or height prop (such as having align-* to set to stretch)
  • IE: text in a flex child is refusing to wrap
    • Try giving the child an explicit max-width (% or px)
  • IE: Flex wrap is not working (refusing to wrap)
    • Give it an explicit width (e.g. 100%) OR, an explicit flex property, like flex: 1
Markdown Source Last Updated:
Sun Aug 04 2024 03:26:13 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 24 2019 01:12:38 GMT+0000 (Coordinated Universal Time)
© 2024 Joshua Tzucker, Built with Gatsby
Feedback