diff --git a/packages/doc/content/components/components/card/plancard-web.mdx b/packages/doc/content/components/components/card/plancard-web.mdx
index 75afd51c5e..b334ca539c 100644
--- a/packages/doc/content/components/components/card/plancard-web.mdx
+++ b/packages/doc/content/components/components/card/plancard-web.mdx
@@ -157,7 +157,7 @@ Display an extra content before the divider.
       </PlanCard.ListItem>
       <PlanCard.ListItem
         icon={Dumbbell}
-        text="This content should be truncated"
+        text="List item with a long text that should be truncated"
       />
       <PlanCard.ListItem icon={User} text="4x/month 1-on-1 sessions" />
     </PlanCard.List>
@@ -165,6 +165,34 @@ Display an extra content before the divider.
 </PlanCard>
 ```
 
+#### List item with a clickable content
+
+```javascript
+<PlanCard>
+  <PlanCard.Content
+    title="Gold"
+    currency="$"
+    price="99.90"
+    period="/mo"
+    badgeColor="energy"
+  >
+    <PlanCard.List>
+      <PlanCard.ListItem
+        icon={Dumbbell}
+        text="List item with a long text that should not be truncated"
+        truncate={false}
+        onClick={() => alert('List item clicked!')}
+      />
+      <PlanCard.ListItem
+        icon={Dumbbell}
+        text="List item with a long text that should be truncated"
+        onClick={() => alert('List item clicked!')}
+      />
+    </PlanCard.List>
+  </PlanCard.Content>
+</PlanCard>
+```
+
 ### Props
 
 #### PlanCard
diff --git a/packages/yoga/src/Card/web/PlanCard/List.jsx b/packages/yoga/src/Card/web/PlanCard/List.jsx
index 9fa3fdf295..1c29426e10 100644
--- a/packages/yoga/src/Card/web/PlanCard/List.jsx
+++ b/packages/yoga/src/Card/web/PlanCard/List.jsx
@@ -37,7 +37,7 @@ const Item = styled.li`
 const Wrapper = styled(Box)`
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  width: 100%;
 
   ${props =>
     props.as === 'button' &&
@@ -46,6 +46,7 @@ const Wrapper = styled(Box)`
       padding: 0;
       background: transparent;
       cursor: pointer;
+      text-align: start;
     `}
 
   svg {
@@ -103,7 +104,7 @@ const ListItem = withTheme(props => {
   return (
     <Item>
       <Wrapper {...wrapperProps}>
-        <Box display="flex" alignItems="flex-start">
+        <Box display="flex" alignItems="flex-start" width="100%">
           {Icon && (
             <IconWrapper>
               {isValidElement(Icon) ? (
diff --git a/packages/yoga/src/Card/web/PlanCard/__snapshots__/PlanCard.test.jsx.snap b/packages/yoga/src/Card/web/PlanCard/__snapshots__/PlanCard.test.jsx.snap
index f5fa1f0cc4..82f518c637 100644
--- a/packages/yoga/src/Card/web/PlanCard/__snapshots__/PlanCard.test.jsx.snap
+++ b/packages/yoga/src/Card/web/PlanCard/__snapshots__/PlanCard.test.jsx.snap
@@ -2,6 +2,7 @@
 
 exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`] = `
 .c15 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -283,7 +284,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`]
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  min-width: 0;
+  width: 100%;
 }
 
 .c14 svg {
@@ -398,6 +399,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`]
             <div
               class="c15"
               display="flex"
+              width="100%"
             >
               <div
                 class="c16"
@@ -427,6 +429,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with default PlanCard 1`]
             <div
               class="c15"
               display="flex"
+              width="100%"
             >
               <div
                 class="c16"
@@ -788,6 +791,7 @@ exports[`<PlanCard /> Snapshots should match snapshot with variant 1`] = `
 
 exports[`<PlanCard /> Snapshots should render list item content as button 1`] = `
 .c15 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1069,11 +1073,12 @@ exports[`<PlanCard /> Snapshots should render list item content as button 1`] =
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  min-width: 0;
+  width: 100%;
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
+  text-align: start;
 }
 
 .c14 svg {
@@ -1189,6 +1194,7 @@ exports[`<PlanCard /> Snapshots should render list item content as button 1`] =
             <div
               class="c15"
               display="flex"
+              width="100%"
             >
               <div
                 class="c16"
@@ -1219,6 +1225,7 @@ exports[`<PlanCard /> Snapshots should render list item content as button 1`] =
             <div
               class="c15"
               display="flex"
+              width="100%"
             >
               <div
                 class="c16"