Bootstrap 4 使用Bootstrap 4制作的Flipcard不太有效

我正在尝试创建一个flipcard，当翻转时，卡片本身保持固定大小。 但是，当卡的第一个定义（正面）面大于/长于第二个面时，卡的尺寸不正确

我一直在玩弄代码，但似乎找不到好的解决方案。我做错了什么

图1.0
转动
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
图1.0
转动
标签
价值
A.
14
B
32
C
17

PS

---

codepen示例仅适用于chrome atm，Firefox中的透明度是错误的

调整myChart的宽度和高度以使其适合卡，或者增加卡的宽度和高度

欢迎使用StackOverflow！您的解决方案最好有一些代码显示OP将如何实现它。请包括在内谢谢你的建议。然而，我一直无法找到一种既能增加卡的宽度和高度，又不破坏一般响应能力的有效解决方案。你能详细说明或举例说明如何做到这一点吗？

<div class="container">
    <div class="flip">
        <div class="card shadow my-2 mx-0 p-0" id="card-1">
            <div class="face front"> 
                    <div class="card-body">
                        <div class="float-left">
                            <h4><span class="badge badge-pill badge-primary">Chart 1.0</span></h4>
                        </div>
                        <div class="float-right">
                            <button type="button" class="btn btn-outline-dark border-0 card-1-button">TURN</a>
                        </div>
                        <div>
                            <canvas id="myChart"></canvas>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
            </div> 
            <div class="face back"> 
                    <div class="card-body">
                        <div class="float-left">
                            <h4><span class="badge badge-pill badge-primary">Chart 1.0</span></h4>
                        </div>
                        <div class="float-right">
                            <button type="button" class="btn btn-outline-dark border-0 card-1-button">TURN</a>
                        </div>
                        <div>
                            <table class="table table-sm table-striped my-5">
                                <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">Label</th>
                                        <th scope="col">Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>A</td>
                                        <td>14</td>
                                    </tr>
                                    <tr>
                                        <td>B</td>
                                        <td>32</td>
                                    </tr>
                                    <tr>
                                        <td>C</td>
                                        <td>17</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
        </div>   
    </div>
</div>