html - 在容器底部放置一个 div

Question

我正在尝试将一个 div 设置到 flex 容器中页面的底部。

不知何故，我可以使用:

position:absolute;
bottom: 10px;

但是 div 然后会包裹到整个视口(viewport)。

我试图在一个盒子里修复它。

检查代码。你会明白的。

https://jsfiddle.net/v3v1z7pv/

#container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-flow: row;
}
body {
  margin: 0px;
  padding: 0px;
}
.box {
  min-width: 300px;
  border: 1px solid black;
  background-color: red;
}
.whiteBox {
  bottom: 10px;
  width: 100%;
  height: 100px;
  background-color: white;
  position: absolute;
}

<div id="container">
  <div class="box">
    <div class="whiteBox">Whte box</div>
  </div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

Answer 1

将 position:relative 添加到 .box 。所以 whitebox 会留在里面

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

在这里查看更多 relative absolute

#container
{
  display:flex;
  height:100vh;
  width:100vw;
  flex-flow: row;
}
body{
  margin:0px;
  padding:0px;
}
.box
{
  min-width:300px;
  border:1px solid black;
  background-color:red;
  position:relative;
}
.whiteBox
{
  bottom:10px;
width:100%;
height:100px;
background-color:white;
position: absolute;

}

<div id="container">
  <div class="box">
    <div class="whiteBox">Whte box</div>
  </div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>

</div>