Bootstrap4卡柱类在某些设备（iPhone5）和分辨率中无法正常工作

Question

我在下拉菜单中使用Bootstrap4“卡片栏”来显示带有砖石风格卡片的响应式菜单。它可以在许多分辨率和设备（人像和风景）下完美运行，但是在iPhone 5.x中，根据内容的不同，这些卡片可以扩展到其父div之外，并且可以容纳一些设备和某些分辨率（宽度约600像素）。父div（卡片栏）切断了屏幕。

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button aria-controls="mainMenu" aria-expanded="false" aria-label="Menu" class="navbar-toggler" data-target="#mainMenu" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainMenu">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a aria-expanded="false" aria-haspopup="true" class="nav-link" data-toggle="dropdown" href="#" role="button" title="Administração">
                    <i class="fas fa-cog"></i> <span class="nav-label">Administração</span>
                </a>
                <div class="dropdown-menu">
                    <div class="cards-container m-0 p-3"> <!-- This padding is mandatory -->
                        <div class="card-columns"> <!-- It doesn't work in iPhone 5/SE, other devices and some specific resolutions. The card's width expands outside of its parent -->
                            <div class="card">
                                <div class="card-header">Configurações e Parâmetros</div>
                                <div class="card-body">
                                    <ul>
                                        <li><a href="#">Configurações Gerais</a></li>
                                        <li><a href="#">Calendários Corporativos</a></li>
                                        <li><a href="#">Faixas de Tolerância</a></li>
                                        <li><a href="#">Menus de Estratégias</a></li>
                                        <li><a href="#">Menus de Projetos/Programas/Processos</a></li>
                                        <li><a href="#">Configuração de Relatórios Dinâmicos</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">Configuração de Fluxos e Formulários</div>
                                <div class="card-body">
                                    <ul>
                                        <li><a href="#">Modelos de Fluxos</a></li>
                                        <li><a href="#">Modelos de Formulários</a></li>
                                        <li><a href="#">Perfis de Acesso aos Fluxos</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">Relatórios</div>
                                <div class="card-body">
                                    <ul>
                                        <li><a href="#">Auditoria</a></li>
                                        <li><a href="#">Relatórios de Administração</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

Codepen