При добавлении контента дочерний блок выходит за пределы родительского и прижимается к низу, а блок с картинкой закрывает контент

В моём коде есть родительский блок, содержащий дочерние, и один из дочерних должен растягиваться в длину при добавлении контента, но в итоге он выходит за пределы родительского и прижимается к низу, footer при этом остается на месте. А у картинки в блоке "tut_item" почему-то появляется отступ, который перекрывает контент и не позволяет переходить по ссылкам. Как сделать адекватную адаптацию по высоте и нормализовать размер картинки?

Контейнер:

<div class="container">

    <div class="alignment">
        <div class="tut_content">
            <div class="picture_block"></div>
            <div class="subject_container">
                <div class="subject">
                    <div class="content_block">
                        <h1 class="sub_title">Системная инженерия</h1>
                        {% include 'documents.html' %}
                    </div>
                </div>
            </div>
            <div class="tut_item">
                <div class="picture_fit">
                    <img src="{% static 'img/Системная инженерия.jpg' %}" alt="">

                </div>
            </div>
        </div>
    </div>
</div>

Футер:

<footer class="footer">
    <div class="container">
        <div class="footer_inner">
            Все материалы, размещённые на сайте, разработаны автором или собраны из общедоступных публичных ресурсов
            сети интернет и предназначены исключительно для чтения с целью образования. Данный проект является
            некоммерческим, и автор сайта не несёт ответственности за возможные последствия использования предложенных
            только для чтения материалов в целях, запрещённых нормами международного права.
        </div>
    </div>
</footer>

CSS блоков:

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;

}

.alignment{
    margin: 0 auto;
    width: 79%;
    padding-bottom: 15%;
}

.tut_content {
    padding: 150px 0;
    display: flex;
    position: relative;
    width: 100%;
    min-height: 700px;

}


.picture_block {
    position: absolute;
    background: black;
    display: inline-block;
    padding-left: 43%;
    padding-bottom: 55%;
}

.subject_container{
    display: flex;
    background: white;
    left: 30%;
    margin-top: -3%;
    width: 70%;
    max-width: 100%;
    height: auto;
    position: absolute;
}

.subject {
    flex: 1 1 auto;
}

.content_block {
    padding: 100px 0;
    margin-left: auto;
    width: 70%;
}

.sub_title {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tut_item {
    position: absolute;
    left: 5%;
    margin-top: 5%;
}


.tut_item img {
    width: 71%;
    z-index: 10;
    object-fit: cover;
    top: 0;
    left: 0;
}

CSS футера:

.footer {
    width: 100%;
    bottom: 0;
    z-index: 1;
    position: absolute;
    flex-shrink: 0;
}