card collapsable with adminLTE

Question

I´m trying to create <div class="card collapsed-card"> in my app, but i´m having a strange behavior. I have this card with vue component:

<div class="card collapsed-card">
                        <div class="card-header card_precontract" data-card-widget="collapse" title="DATOS PERSONALES">
                            <div class="row justify-content-around">
                                <div class="col-md-11">
                                    <h4 class="card-title">
                                        <i class="fas fa-1x fa-user"></i> DATOS PERSONALES
                                    </h4>
                                </div>
                                <div class="col-md-1 d-none text-right" id="personal_data_warning">
                                    <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                        <holderPersonalData></holderPersonalData>
                    </div>

in holderPersonalData:

<template>
    <div class="card-body" id="container_personal_data">
        <div class="container-flex">
            <div class="row flex-wrap">
              ...........

My problem it´s, when expand my card, my viewport show so:

i have in my style, height: auto !important; in my parent container, but same problem:

<div class="shadow p-4 mt-5 rounded bg-white mb-5" style="height: auto">

I´m using AdminLTE to my backed theme, and i change login to collarpable card:

<div class="card-header card_precontract" data-card-widget="collapse" title="DATOS PERSONALES">

i havent´t got icon to do collapsable, directly in header card. I hope that anybody can help me.

Thanks for readme and sorry for my bad english