Я пытаюсь создать элемент div гибкого элемента, который будет иметь те же размеры, что и содержащееся в нем изображение, но кажется, что элемент div не знает о масштабированном размере изображения и всегда имеет ту же ширину, что и полноразмерное изображение, в результате чего в видимой рамке с правой стороны.
Я понимаю, что если я удаляю div .flex-top, все работает, как и ожидалось, потому что div .flex-bottom и его родители имеют высоту 100%. Однако, когда верхний div возвращается, он все равно сохраняет ту же ширину, как если бы flex-grow не влиял на его вычисленную высоту.
Я почти уверен, что проблема заключается в высоте .flex-bottom 100%, но не могу придумать обходной путь.
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
background: white;
}
.flex-container {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 0;
height: 100%;
background: white;
}
.flex-top {
flex: 2;
background: salmon;
}
.flex-bottom {
display: flex;
flex: 1;
min-height: 0;
align-self: center;
background: seagreen;
}
img {
height: 100%;
width: auto;
}
<body>
<div class="flex-container">
<div class="flex-top">
<p>Hello, I take 2/3 of the page</p>
</div>
<div class="flex-bottom">
<img src="https://picsum.photos/500" />
</div>
</div>
</body>