在flex中包含div

Question

我正试图使用absolute使一个div包含在另一个div中，但当我添加100%的高度和宽度时，它的大小是它所包含的div的体大小，而不是它所包含div的100%高度和宽度，因此我无法将div定位在它所包含iv的底部。

有人知道我在这里面临的问题的解决办法吗。

.row {
width: 80%;
max-width: 1425px;
margin: 0 auto;
padding: 50px 0px;
display: flex;
}
.column {
flex: 1;
}
.halves {
display: flex;
justify-content: space-between;
}
.halves .column {
width: 50%;
}
.p1 {
height: 600px;
}
.sand {
background-color: #e4c8b8
}
img {
max-width: 100%;
max-height: 100%;
}

.info {
position: absoulute;
width: 100%;
height: 100;
bottom: 10px;
right: 10px
}

<div class="row halves">
<div class="column sand p1">
<img src="https://imgur.com/kgbkNDy.png" />
<div class="info">
<h3>Project one</h3>
</div>
</div>
</div>

Answer 1

将position: relative;添加到要指定大小的元素中。