diff --git a/src/components/card/CardBottom.vue b/src/components/card/CardBottom.vue
index 687301baa..4a0ae1047 100644
--- a/src/components/card/CardBottom.vue
+++ b/src/components/card/CardBottom.vue
@@ -7,11 +7,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { cn } from '@/utils/tailwindUtil'
+
 const { fullHeight = true } = defineProps<{
   fullHeight?: boolean
 }>()
 
-const containerClasses = computed(
-  () => `flex-1 w-full${fullHeight ? ' h-full' : ''}`
+const containerClasses = computed(() =>
+  cn('flex-1 w-full', fullHeight && 'h-full')
 )
 </script>
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index bf5ca62b5..014739d7b 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -35,8 +35,8 @@ const containerClasses = computed(() => {
 const containerStyle = computed(() =>
   maxWidth || minWidth
     ? {
-        maxWidth: `${maxWidth}px`,
-        minWidth: `${minWidth}px`
+        maxWidth: maxWidth ? `${maxWidth}px` : undefined,
+        minWidth: minWidth ? `${minWidth}px` : undefined
       }
     : {}
 )