diff --git a/crates/gpui/src/styled.rs b/crates/gpui/src/styled.rs
index 508dca9583..535cc3e053 100644
--- a/crates/gpui/src/styled.rs
+++ b/crates/gpui/src/styled.rs
@@ -307,6 +307,13 @@ pub trait Styled: Sized {
         self
     }
 
+    /// Sets the initial size of flex items for this element.
+    /// [Docs](https://tailwindcss.com/docs/flex-basis)
+    fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
+        self.style().flex_basis = Some(basis.into());
+        self
+    }
+
     /// Sets the element to allow a flex item to grow to fill any available space.
     /// [Docs](https://tailwindcss.com/docs/flex-grow)
     fn flex_grow(mut self) -> Self {
@@ -314,6 +321,20 @@ pub trait Styled: Sized {
         self
     }
 
+    /// Sets the element to allow a flex item to shrink if needed.
+    /// [Docs](https://tailwindcss.com/docs/flex-shrink)
+    fn flex_shrink(mut self) -> Self {
+        self.style().flex_shrink = Some(1.);
+        self
+    }
+
+    /// Sets the element to prevent a flex item from shrinking.
+    /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
+    fn flex_shrink_0(mut self) -> Self {
+        self.style().flex_shrink = Some(0.);
+        self
+    }
+
     /// Sets the element to align flex items to the start of the container's cross axis.
     /// [Docs](https://tailwindcss.com/docs/align-items#start)
     fn items_start(mut self) -> Self {
diff --git a/crates/ui/src/components/list/list_item.rs b/crates/ui/src/components/list/list_item.rs
index ed1edc0864..33676ee11d 100644
--- a/crates/ui/src/components/list/list_item.rs
+++ b/crates/ui/src/components/list/list_item.rs
@@ -222,17 +222,19 @@ impl RenderOnce for ListItem {
                     }))
                     .child(
                         h_flex()
-                            // HACK: We need to set *any* width value here in order for this container to size correctly.
-                            // Without this the `h_flex` will overflow the parent `inner_list_item`.
-                            .w_px()
-                            .flex_1()
+                            .flex_grow()
+                            .flex_shrink_0()
+                            .flex_basis(relative(0.25))
                             .gap_1()
+                            .overflow_hidden()
                             .children(self.start_slot)
                             .children(self.children),
                     )
                     .when_some(self.end_slot, |this, end_slot| {
                         this.justify_between().child(
                             h_flex()
+                                .flex_shrink()
+                                .overflow_hidden()
                                 .when(self.end_hover_slot.is_some(), |this| {
                                     this.visible()
                                         .group_hover("list_item", |this| this.invisible())
diff --git a/crates/ui/src/components/stories/list_item.rs b/crates/ui/src/components/stories/list_item.rs
index f2af011db8..ae7be9b9c7 100644
--- a/crates/ui/src/components/stories/list_item.rs
+++ b/crates/ui/src/components/stories/list_item.rs
@@ -4,6 +4,8 @@ use story::Story;
 use crate::{prelude::*, Avatar};
 use crate::{IconName, ListItem};
 
+const OVERFLOWING_TEXT: &'static str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mauris ligula, luctus vel dignissim eu, vestibulum sed libero. Sed at convallis velit.";
+
 pub struct ListItemStory;
 
 impl Render for ListItemStory {
@@ -98,5 +100,29 @@ impl Render for ListItemStory {
                         println!("Right mouse down!");
                     }),
             )
+            .child(Story::label("With overflowing content in the `end_slot`"))
+            .child(
+                ListItem::new("with_overflowing_content_in_end_slot")
+                    .child("An excerpt")
+                    .end_slot(Label::new(OVERFLOWING_TEXT).color(Color::Muted)),
+            )
+            .child(Story::label(
+                "`inset` with overflowing content in the `end_slot`",
+            ))
+            .child(
+                ListItem::new("inset_with_overflowing_content_in_end_slot")
+                    .inset(true)
+                    .child("An excerpt")
+                    .end_slot(Label::new(OVERFLOWING_TEXT).color(Color::Muted)),
+            )
+            .child(Story::label(
+                "`inset` with overflowing content in `children` and `end_slot`",
+            ))
+            .child(
+                ListItem::new("inset_with_overflowing_content_in_children_and_end_slot")
+                    .inset(true)
+                    .child(Label::new(OVERFLOWING_TEXT))
+                    .end_slot(Label::new(OVERFLOWING_TEXT).color(Color::Muted)),
+            )
     }
 }