Как заставить элементы FlexBox перекрывать SVG-элемент?

Question

Мне нужно перекрыть верх и низ элемента SVG с элементами FlexBox, чтобы пространство между ними исчезло.

Что я пробовал:

• Добавлен z-индекс 1 для элементов FlexBox, но он ничего не сделал.
• Добавлен z-индекс -1 к элементу SVG, но он полностью скрывает элемент, а это не то, что я хотел.

Вот мой код:

// Lottie returns an SVG with class wrapper.

const defaultOptions = {                                                                      
        loop: false,    
        autoplay: true,                                                                               
        animationData: balanceData.default,                                                           
        rendererSettings: {                                                                          
                preserveAspectRatio: 'xMidYMid slice',                                                
                className: 'wrapper'                                                
        }               
};

---

// home.js

<div className="message"> 
        <div className="txt-1">Find                
        </div>                 

        <Lottie options={defaultOptions}                                              
                height={510}                                                                  
                width={310}                                                                   
        />         

        <div className="txt-2">with your</div>                 
        <div className="txt-3">body & mind.</div>                     

// home.css

.message {
        font-family: 'Roboto', sans-serif;
        font-size: 6em;
        align-items: center;
        display: flex;
        padding-left: 60px;
        padding-top: 60px;
        flex-direction: column;
}

.txt-1 {
        opacity: 0;
        animation-name: txt-1;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
        display: flex;
        align-items: center;
}

.wrapper {
        z-index: 1;
}

@keyframes txt-1 {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}

.txt-2 {
        opacity: 0;
        animation-name: txt-2;
        animation-duration: 1.5s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}

@keyframes txt-2 {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}

.txt-3 {
        opacity: 0;
        animation-name: txt-3;
        animation-duration: 2s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
}

@keyframes txt-3 {
        0% {
                opacity: 0;
        }
        100% {
                opacity: 1;
        }
}

Опять же, все, что я хочу, это чтобы пространство между элементами FlexBox и элементом SVG было скрыто:

Answer 1

Разобрался! Просто пришлось удалить align-items: center; из .message и добавить следующее к .wrapper:

.wrapper {
   padding-left: 5%;
   width: 90% !important;
   display: flex !important;
}

чтобы мой интерфейс выглядел следующим образом:

Примечание: Мне хорошо известно, что настоятельно рекомендуется использовать !important только в служебных или пользовательских таблицах стилей. Но библиотека, которую я использую для рендеринга SVG, не позволяет мне изменять их таблицу стилей, поэтому я считаю, что это оправданный вариант использования.