盒子的宽度和高度的比例变化

如何使 flexbox 高度同时变化并与这个盒子的宽度成比例？

好吧，理想情况下，文本大小会自动改变。

html:

<div class="main-news">
            <a href="#">/ Политика</a>
            <h3>
              В Крыму отреагировали<br>на слова Кравчука<br>о возврате полуострова
            </h3>
            <div class="main-news-props">
              <div class="main-news-date">
                19 Июня 2018
              </div>
              <div class="main-news-time">
                10:48
              </div>
            </div>
          </div>

CSS：

.main-news {
  display: flex;
  max-width: 460px;
  width: 100%;
  height: 320px;
  flex-shrink: 1;
  background-color: green;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.main-news a {
  font-size: 12px;
  text-decoration: none;
  color: black;
  margin-left: 20px;
}

.main-news h3 {
  font-size: 29px;
  font-weight: bold;
  color: black;
  margin-left: 20px;
  padding-bottom: 0;
  margin-top: 18px;
}

.main-news-props {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: black;
  margin-left: 20px;
  margin-bottom: 35px;
}

.main-news-date {
  margin-right: 20px;
}

.main-news-time {
  background-image: url(img/icon-time-white.png);
  background-repeat: no-repeat;
  background-position: left 1px;
  padding-left: 14px;
}

链接到标记和样式