/* Problem: text overflows -->
.item {
  flex: 1;
  /* Text in item can overflow -->
}

<!-- Solution: add min-width -->
.item {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Problem: items won't shrink below min content -->
.item {
  flex: 1;
  flex-shrink: 1;
  /* Item has content with fixed width, won't shrink below that -->
}

<!-- Solution: force shrinking -->
.item {
  flex: 1;
  min-width: 0;  /* allow content to shrink -->
  overflow: hidden;
}

/* Problem: image breaks flex layout -->
.container {
  display: flex;
  width: 400px;
}

.image {
  flex: 0 0 auto;
  /* Image with fixed width breaks layout -->
}

<!-- Solution: constrain image -->
.image {
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
}

/* Problem: flex: 1 doesn't make equal widths -->
.container {
  display: flex;
  width: 900px;
}

.item {
  flex: 1;
  /* Should be 300px each but isn't -->
}

<!-- Check: is width set on parent? -->
<!-- Check: is flex-basis conflicting with width? -->
<!-- Check: are items inside having content that's too large? -->

<!-- Solution: check basis calculation -->
.container {
  display: flex;
  width: 900px;
  flex-flow: row nowrap;
}

.item {
  flex: 1 1 0;  /* explicit 0 basis, should be 300px -->
  min-width: 0;  /* allow shrinking -->
}

/* Problem: flex items not stretching to height -->
.container {
  display: flex;
  height: 200px;
}

.item {
  /* Items are not 200px tall -->
}

<!-- Solution: items need flex-grow or align-items: stretch -->
.item {
  flex: 1;  /* grows in height on row flex -->
}

/* Or: align-items on container -->
.container {
  display: flex;
  height: 200px;
  align-items: stretch;  /* stretches items vertically -->
}

/* Problem: justify-content not centering -->
.container {
  display: flex;
  justify-content: center;
  /* Items not centered -->
}

<!-- Check: does container have a width? -->
<!-- Check: are items larger than container? -->

.container {
  display: flex;
  width: 400px;  /* needs width to center -->
  justify-content: center;
}

/* Problem: align-items not working -->
.container {
  display: flex;
  align-items: center;
  /* Items not vertically centered -->
}

<!-- Check: does container have height? -->
<!-- Check: is flex-direction column? (align-items works differently) -->

.container {
  display: flex;
  height: 200px;  /* needs height for vertical alignment -->
  align-items: center;
}

/* Problem: gap not working -->
.container {
  display: flex;
  gap: 20px;
  /* Items have no gap -->
}

<!-- Check: browser support (gap added in 2020) -->
<!-- Check: is this Safari or old browser? -->

/* Fallback for older browsers -->
.item {
  margin: 10px;  /* fallback margin -->
}

/* When flex doesn't work, check this: -->

1. Is display: flex set?
   .container { display: flex; }

2. Does container have dimensions?
   width: set for horizontal centering
   height: set for vertical centering

3. Are flex items being affected?
   Only direct children are flex items
   Nested items need their own flex containers

4. Is flex-basis conflicting?
   Use flex: 1 1 0 not flex: 1 without basis
   Or use flex-basis: 0

5. Are items overflowing?
   Add min-width: 0 to shrinking items
   Add max-width: 100% to images

6. Are margins collapsing?
   Use gap instead of margin
   Or use margin: 0 not margin: auto

7. Is justify-content working?
   It only works if there's space to distribute
   Items might be larger than container

8. Is align-items working?
   Container needs height or flex: 1
   Doesn't work with flex-direction: column (use justify-content)

9. Browser support?
   gap: 2020+
   Check caniuse.com for older browsers

<!-- Use browser DevTools Flexbox inspector -->

/* Firefox: excellent flex debugging -->
1. Inspect element
2. Go to Inspector tab
3. Look for flex container icon next to display: flex
4. Click icon to show flex overlay
5. See flex lines, items, and gaps visually

/* Chrome: flex debugging -->
1. Inspect element
2. In Styles panel, click flex icon next to display: flex
3. Shows flex overlay with dimensions
4. Hover over items to see their sizes

/* What to look for -->
- Is the container large enough?
- Do items fit or overflow?
- Are gaps showing correctly?
- Is flex direction what you expect?
- Are items the right size?

/* Common findings -->
- Container is too small for items
- Items have min-width preventing flex
- Height not set on container (alignment fails)
- flex-basis competing with width
- margin: auto messing with alignment