我有两个div,其中一个包含一个图像(400x600),将按比例调整大小以适应div。另一个面板应填充剩余空间。当视口调整大小时,图像按预期调整大小,但flexbox未填充剩余空间。如何更改flexbox以填充剩余空间?此gif显示了问题:
这是我所得到的,但我无法弄清楚如何在图像缩小时使更大的div填充。基本上,我需要panel-2来填补图像缩小时创建的空白。以便两个面板之间没有空间。body {
background-color: #afafaf;
margin: 0;
padding: 0;
}
.container {
background-color: #fff;
height: 100vh;
display: flex;
}
.img-scaleing {
max-width: 100%;
max-height: 100%;
}
.panel1 {
background-color: #b7d1d4;
}
.panel2 {
flex: 100%;
background-color: #a493c3;
}
<div class="container">
<div class="panel1">
<img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-scaleing" />
</div>
<div class="panel2"></div>
</div>
Codepen: https://codepen.io/anon/pen/oRmJZx
Codepen: https://codepen.io/anon/pen/oRmJZx