Как растянуть div по ширине до конца страницы? (html css)

Не так давно начал изучать html/css. Столкнулся с проблемой: не могу растянуть div (#article) до конца страницы относительно ширины. Пробовал функцию calc, но она не помогает. Как я понимаю, проблема связана с display: flex. Как можно решить проблему на примере моего кода?

startpage.html:

{% extends 'mainApp/base.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %} Газета 'Звездный час' - все последние новости о звёздах и не только!
    {% endblock %}
</head>
<body>
    {% block content %}

        <div id="article">
            <header class="starName"> Анджелина Джоли</header>
            <p> Описание звезды</p>
            <a>Читать дальше</a>
            
        </div>


    {% endblock %}
</body>
</html>

base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon"
          type="image/x-icon" href="{% static 'images/logo.png' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div id="preFooter">
        <div id="headerSite">
            <a href="{% url 'home' %}">
                <img class='HeaderElem' src="{% static 'images/logo.png' %}"
                     width="40" height='40'></a>
            <a  class='HeaderElem'  id="main" href="{% url 'home' %}">Главная</a>
            <a  class='HeaderElem'  id="aboutus" href="{% url 'about' %}">Контакты</a>
            <a  class='HeaderElem'  id="newarticle" href="{% url 'newarticle' %}">Новая статья</a>
            <a class='HeaderElem'  id="feedback" href="{% url 'feedback' %}">Обратная связь</a>
            <a class='HeaderElem'  id="enter" href="{% url 'enter' %}">Войти</a>
        </div>
        <div id="container">
            <div id="aside">
                <header class="categories">Категории</header>
                <div class="categElem">Актрисы</div>
                <div class="categElem">Певицы</div>
                <div class="categElem">Спортсменки</div>
                <div class="categories" id="socials">Наши соцсети</div>
                <a href="https://www.instagram.com/">
                    <img id='inst' class='socials' width='50' height='50'
                         src="{% static 'images/inst.png' %}"></a>

                <a href="https://www.youtube.com/">
                    <img id='yout'  class='socials'  width='50' height='50'
                         src="{% static 'images/yout.png' %}"></a>
            </div>
            <div id="content">
                {% block content %}
                {% endblock %}
            </div>
        </div>

    <div id="footerSite">
        <div class="FooterElem" id="creator"> created by <span>bitchdragon</span> </div>
        <div class="FooterElem" id="date"> 2022 </div>
    </div>
</body>
</html>

base.css:


body,html {
    padding: 0;
    margin : 0;
    height: 100%

}
.HeaderElem {
    display: inline-block;
    color: black;
    text-decoration: none;
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 3px;
    font-size: 12pt
}
#headerSite {
    position: relative;
    background: linear-gradient(to top, rgb(85, 107, 47), rgb(128,128,0) );
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgb(110,110,110)
}
#feedback {
    position: absolute;
    right: 60px;
    top: 10px
}
#enter {
    position: absolute;
    right: 10px;
    top: 10px
}

span {
    color: red
    }
#footerSite {
    position: relative;
    height: 30px;
    background: linear-gradient(to top,  rgb(128,128,0), rgb(85, 107, 47) );
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-top: 1px solid rgb(110,110,110)
}
.FooterElem {
    position: absolute;
    top: 7px
}
#creator {
    left: 5px
}
#date {
    right: 5px
}
#preFooter {
    min-height: calc(100vh - 30px);
}
#aside {

    height: auto;
    width: 200px;
    min-width: 200px;
    background-color: rgb(240,240,240);
    border-right: 1px solid rgb(200,200,200);
    border-bottom: 1px solid rgb(200,200,200);

}
.categories {
    color: rgb(0, 139, 139);
    font-size: 15pt;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(200,200,200);
    text-align: center;


}
.categElem{
  text-align: center;
  font-size: 13pt;
  margin-bottom: 10px;
  cursor: pointer
}
.socials {
    position: relative;
    left: 45px;
    margin-top: 10px;
    cursor: pointer
}

#yout {
    margin-left: 10px
}
#whowe {
    text-align: center;
    color: rgb(0, 139, 139);
    margin-top: 20px;
    padding-bottom: 20px;
    font-size: 20pt;
    border-bottom: 1px solid rgb(200,200,200);
}
.razd {
    color: red;
    font-size:17pt

}

#about {
    line-height: 2;
    text-align: center
}
#container {
            display: flex;

}
#content{
    min-height: calc(100vh - 70px)
}

#article {
    border-bottom: 2px solid rgb(200,200,200);
    height: 200px;
   
}

Я бы сократил код, но почему-то в нем все работает. Поэтому скинул сразу боевой кусок кода.

На данный момент div выглядит так: введите сюда описание изображения

А хотелось бы чтобы он растягивался по ширине так же как на картинке снизу:

введите сюда описание изображения

1.Можно добавить flex:1; диву #content, это разрешит элементу увеличиваться по ширине

 #content{
    min-height: calc(100vh - 70px);
    flex:1; 
    }

  1. В шаблоне startpage.html оставь только нужное, остальное лишнее :

     {% extends 'mainApp/base.html' %}
 {% load static %}
 {% block title %} 
    Газета 'Звездный час' - все последние новости о звёздах и не только!
 {% endblock %}
 {% block content %}
    <div id="article">
      <header class="starName"> Анджелина Джоли</header>
      <p> Описание звезды</p>
      <a>Читать дальше</a>
    </div>
 {% endblock %}
Вернуться на верх