chore: update Space vertical demo (#34647)

* chore: update Space vertical demo

close #34609

* fix snapshot

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -894,14 +894,46 @@ exports[`renders ./components/space/demo/split.md extend context correctly 1`] =
 exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
+  style="display:flex"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
+      class="ant-card ant-card-bordered ant-card-small"
-      style="width:300px"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -932,8 +964,7 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
     class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered"
+      class="ant-card ant-card-bordered ant-card-small"
-      style="width:300px"
     >
       <div
         class="ant-card-head"

components/space/__tests__/__snapshots__/demo.test.js.snap

@@ -645,14 +645,46 @@ exports[`renders ./components/space/demo/split.md correctly 1`] = `
 exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
+  style="display:flex"
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
   >
     <div
-      class="ant-card ant-card-bordered"
+      class="ant-card ant-card-bordered ant-card-small"
-      style="width:300px"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
         class="ant-card-head"
@@ -683,8 +715,7 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
     class="ant-space-item"
   >
     <div
-      class="ant-card ant-card-bordered"
+      class="ant-card ant-card-bordered ant-card-small"
-      style="width:300px"
     >
       <div
         class="ant-card-head"

components/space/demo/vertical.md

@@ -9,25 +9,25 @@ title:
 
 相邻组件垂直间距。
 
-可以设置 `width: 100%` 独占一行。
-
 ## en-US
 
 Crowded components vertical spacing.
 
-Can set `width: 100%` to fill a row.
-
 ```jsx
 import { Space, Card } from 'antd';
 
 function SpaceVertical() {
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <Card title="Card" style={{ width: 300 }}>
+      <Card title="Card" size="small">
         <p>Card content</p>
         <p>Card content</p>
       </Card>
-      <Card title="Card" style={{ width: 300 }}>
+      <Card title="Card" size="small">
+        <p>Card content</p>
+        <p>Card content</p>
+      </Card>
+      <Card title="Card" size="small">
         <p>Card content</p>
         <p>Card content</p>
       </Card>