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

我一直在处理代码，但是似乎找不到一个好的解决方案。我在做什么错了？

Link to example on Codepen

<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>  

PS codepen示例仅在chrome atm上有效，在Firefox中透明性是错误的