D-flex ломает сетку bootrtap

Question

Я создаю информационную панель с reactJs и react bootstrap. Из-за разного размера карты на моей приборной панели это приводит к разрыву на моей приборной панели. Это скриншот:

I want to fill the gap on my dashboard. According to the bootstrap flex документация , я использовал d-flex align-items-stretch, чтобы заполнить пробел. Примерно так:

      <Row>
        <Col lg="6" md="6" sm="12" className="d-flex align-items-stretch"> //I placed it on Col
            <FrequentUsers />
        </Col>
        <Col lg="6" md="6" sm="12" className="d-flex align-items-stretch">
            //Other content
        </Col>
      </Row>

Размещение d-flex align-items-stretch в теге <Col> - единственный способ, который, как я обнаружил, работал в моем случае. Если я помещу его в тег <Row> или в тег <div> в качестве контейнера вне его, это не сработает.

В результате ось Y растягивается так, как я ожидал, но ось x внезапно сжимается:

So I manage my grid layout to make it wider. The grid layout is still working but it didn't affecting the card, it is only affecting the gap like there is a invisible container in it. So I'm assuming that the grid system at this point is "broken"

I'm guessing that this is because the d-flex. But as I read the documentation, it should've instead make the content fully extended to the side. Please check it on the documentation здесь

Answer 1

На основе комментария @ ChewySalmon. Пытаюсь настроить на своей карте flex-basis. Причина, по которой я делаю это прямо на своей карте, заключается в том, что, как я указал в примере кода в моем вопросе выше, я растянул свой элемент в теге <Col>, который растягивает conten по вертикали (как показано на моем снимке экрана выше). Поэтому мне нужно сделать это на моей карте (также потому, что это единственный способ, который работал в моем случае) , поэтому он растянулся по горизонтали . И работает отлично. Вот код реализации:

<Card style={{flexBasis: "100em"}}> 
    //my content
<Card>

Я использую 100em, потому что это единственный способ, кроме 100px, который работал у меня. Я жестко запрограммировал это, потому что значение одинаково для всех карт, а именно 100em. Но я рекомендую вам использовать реквизиты в атрибуте JSX. Надеюсь, что это поможет вам, у кого есть такая же проблема со мной в будущем. Спасибо @ ChewySalmon.