/* Without constraints, flex items shrink below content -->
.container {
  display: flex;
  width: 400px;
}

.item {
  flex: 1;
  /* Can shrink below content width, causing text to overflow */
}

<!-- Solution: add min-width -->
.item {
  flex: 1;
  min-width: 0;  /* allow shrinking below content */
  overflow: hidden;  /* hide overflow */
  text-overflow: ellipsis;  /* add ... for truncated text */
  white-space: nowrap;  /* keep text on one line */
}

/* Prevent item from shrinking below a minimum -->
.sidebar {
  flex: 0 0 auto;
  min-width: 200px;  /* always at least 200px -->
  max-width: 300px;  /* never more than 300px -->
}

.content {
  flex: 1;
  min-width: 300px;  /* content needs at least 300px -->
}

<!-- Sidebar stays 200-300px, content takes rest with 300px minimum -->

/* Flex items with max-width -->
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 200px;
  max-width: 400px;  /* never bigger than 400px */
  min-width: 150px;  /* never smaller than 150px -->
}

/* Maintain aspect ratio with aspect-ratio -->
.item {
  flex: 1;
  aspect-ratio: 16 / 9;
  /* Always maintains 16:9 ratio as it grows/shrinks */
}

<!-- Square items -->
.square {
  flex: 1 1 200px;
  aspect-ratio: 1;
  /* Always square -->
}

<!-- Image gallery with consistent aspect ratio -->
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item {
  flex: 1 1 150px;
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<!-- All images are square, consistent sizing -->

/* Flex with padding-bottom hack (older browsers) -->
.item {
  flex: 1 1 200px;
  padding-bottom: 56.25%;  /* 16:9 ratio -->
  position: relative;
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Use flex-basis (better for flex items) -->
.item {
  flex: 1 1 200px;
  /* 200px is flex-basis, not width -->
}

/* Avoid: width + flex (confusing) -->
.item {
  width: 200px;
  flex: 1;
  /* Unclear what size should be, conflicts -->
}

/* flex-basis overrides width in flex containers -->
.item {
  width: 300px;
  flex-basis: 200px;
  /* flex-basis wins, item starts at 200px -->
}

/* No flex: width works normally -->
.sidebar {
  display: block;
  width: 250px;
  /* Just normal width, no flex -->
}

<!-- Two-column layout with aspect ratio -->
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 calc(50% - 10px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: white;
}

@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

<!-- Flex with constrained content width -->
.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  flex: 0 0 300px;
  min-width: 250px;
  max-width: 400px;
}

.content {
  flex: 1;
  min-width: 300px;
}

<!-- Flex with minimum and maximum bounds -->
.toolbar {
  display: flex;
  gap: 10px;
}

.tool {
  flex: 0 1 auto;
  min-width: 40px;
  max-width: 100px;
  padding: 8px;
}

<!-- Tools shrink if needed, but min 40px, max 100px -->

<!-- Flex with flexible spacing -->
.navigation {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-item {
  flex: 0 1 auto;
  white-space: nowrap;
  min-width: 0;
}

.spacer {
  flex: 1;
  /* Takes all remaining space -->
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

/* Text truncation in flex items -->
.item {
  flex: 1;
  min-width: 0;  /* important: allows text truncation -->
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!-- Item with long text -->
<div class="item">This is a very long text that should truncate with ellipsis...</div>

<!-- Result: "This is a very long text..." -->

/* Content that shouldn't overflow -->
.container {
  display: flex;
  width: 400px;
}

.image {
  flex: 0 0 150px;
  min-width: 0;
}

.image img {
  width: 100%;
  height: auto;
  display: block;
}

.content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

<!-- Image and content fit without overflow -->

/* Flex with scroll overflow -->
.scroll-container {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.header {
  flex: 0 0 auto;
  padding: 20px;
}

.content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;  /* allow content to scroll -->
}