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;
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.
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 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
- It is easy to miss, but there are actually certain elements that cannot be transformed: non-replaced inline boxes, table-column boxes, and table-column-group boxes
  - non-replaced inline boxes includes elements like <a>, <b>, and <span>
- If your element falls in the excluded category, you can try changing to display: block, or wrapping in a wrapper <div> that you then apply the transformation to
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
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