Как применить CSS flex свойство к вложенному элементу

Question

Это мой код

<div class="site">
<header>
    This is my header
</header>

<div class="content">
    <div class="inside">
        <div id="first">
            </div> 
        <div id="last">
            </div>
        </div>
    </div>
<footer>
    This is my footer
</footer>
</div>

Стили

header {
  background-color: blue;
}
footer {
  background-color: brown;
}

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
  height: 90px;
  background-color: blueviolet;
}
#first {
  background-color: yellow;
  height: 40px;
}
#last {
  background-color: green;
  height: 100px;
}
.inside {

}

Это дает мне такой вывод.

Что мне нужно, это div зеленого цвета должен идти внизу страницы и вверху нижнего колонтитула. и мой желтый div должен растянуться и заполнить расширяющееся фиолетовое пространство. это означает, что не должно быть фиолетового цвета.

Как мне добиться этого, используя свойства CSS flex?

Answer 1

Попробуй вот так. Вам не нужен div с классом inside.

header {
  background-color: blue;
}
footer {
  background-color: brown;
}

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
  background-color: blueviolet;
  display: flex;
  flex-direction: column;
}
#first {
  background-color: yellow;
  flex: 1;
}
#last {
  background-color: green;
  height: 100px;
}
.inside {
  display: flex;
  flex-direction: column;
}

<div class="site">
<header>
    This is my header
</header>

<div class="content">
    <div id="first">
        First
        </div> 
    <div id="last">
    last
        </div>
    </div>
<footer>
    This is my footer
</footer>
</div>