如何将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

试试这样。您不需要inside类的div。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;