fix

assets/flex-kit/flex-kit.css

@@ -714,7 +714,7 @@ script, style {
     display: flex;
     flex-direction: column;
     justify-content: stretch;
-    border-width: 1px;
+    border-width: 0;
     border-style: solid;
     border-color: #e9e9e9;
     /*border-radius: 3px;*/
@@ -724,6 +724,18 @@ script, style {
     /*padding-bottom: calc(var(--gap-inner) / 2);*/
     /*padding-top: calc(var(--gap-inner) / 2);*/
 }
+.flex-card__border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    display: block;
+    pointer-events: none;
+}
 .flex-card__content:after,
 .flex-card__body:before,
 .flex-card__body:after {
@@ -733,7 +745,7 @@ script, style {
     flex-grow: 0;
     flex-shrink: 0;
 }
-.flex-card__content > *:empty {
+.flex-card__content > *:not(.flex-card__border):empty {
     display: none;
 }
 .flex-card__header {
@@ -764,7 +776,7 @@ script, style {
     opacity: 0;
     visibility: hidden;
 }
-.flex-card.flex-card--hover:hover .flex-card__content {
+.flex-card:hover .flex-card__content {
     height: auto;
     z-index: 100;
 }

tests/flex-card/product-list-item.php

@@ -0,0 +1,49 @@
+<?php
+
+
+?>
+
+<div class="flex-card aspect-ratio flex-list-item">
+    <div class="flex-card__section">
+        <div class="flex-card__content">
+            <div class="flex-card__body-shell aspect-ratio">
+                <div class="flex-card__body">
+                    <div class="flex-card__picture">
+                        <div class="kit-picture" style="background-image: url(<?=$item['image_preview']?>)">
+
+                        </div>
+                    </div>
+                    <div class="flex-card__title">
+                        <div class="kit-line-clamp">
+                            <?=$item['name']?>
+                        </div>
+                    </div>
+                    <div class="flex-card__props"></div>
+                </div>
+
+            </div>
+            <div class="flex-card__header">
+                <div class="flex-list flex-list--ticket">
+                    <?
+                    foreach ($item['tickets'] as $ticket) {
+                        ?>
+                        <div class="flex-list-item">
+                            <div class="ticket-item <?=$ticket['code']?>">
+                                <div class="kit-line-clamp"><?=$ticket['name']?></div>
+                            </div>
+                        </div>
+                        <?
+                    }
+                    ?>
+                </div>
+            </div>
+            <div class="flex-card__footer"></div>
+            <div class="flex-card__hover">
+                <div class="flex-card__hover-content">
+                    <?=$item['hover']?>
+                </div>
+            </div>
+            <div class="flex-card__border"></div>
+        </div>
+    </div>
+</div>

tests/flex-card/product-list.php

@@ -0,0 +1,65 @@
+
+
+<head>
+    <script src="chat.js"></script>
+    <link href="./../../assets/flex-kit/flex-kit.css" rel="stylesheet">
+    <style  type="text/css">
+        .section-product-list {
+            --col-count: 4;
+
+        }
+        .section-product-list .flex-card {
+            --kit-color-content: #FFF;
+            --aspect-ratio: calc(200 / 250);
+        }
+        .section-product-list .flex-card__picture {
+            flex-grow: 1;
+        }
+        .flex-card__hover {
+            text-align: center;
+            color: grey;
+            font-size: 0.8em;
+        }
+    </style>
+
+</head>
+<?
+
+$items = array_fill(0, 40, [
+    'id' => 1,
+    'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
+    'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
+    'image_preview' => './product.svg',
+    'image_detail' => '',
+    'text_preview' => 'asdas asdas dasdasd',
+    'tickets' => [
+        [
+            'code' => 'news',
+            'name' => 'Новинка'
+        ],
+        [
+            'code' => 'discount',
+            'name' => 'Скидка'
+        ]
+    ]
+]);
+
+?>
+<body>
+    <div class="kit-wrapper">
+        <section class="section-product-list">
+
+            <div>
+                <h1>Каталог</h1>
+            </div>
+
+            <div class="flex-list flex-card-list--list-">
+                <?foreach($items as $item) {?>
+                        <?
+                        include "product-list-item.php";
+                        ?>
+                <?}?>
+            </div>
+        </section>
+    </div>
+</body>