Гибкое направление: столбец; работает по-разному в Chrome и Firefox ⇐ CSS

[Гость]

Код: Выделить всё

body {
margin: 0;
padding: 0;
}

.bigContainer {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0, 255, 60);
}

.smallContainer {
display: flex;
flex-direction: column;
position: absolute;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 255);
align-items: center;
right: 0;
}

.profile {
display: flex;
flex-direction: column;
align-items: center;
height: 45%;
}

.meow {
font-size: larger;
font-weight: bolder;
padding: 10px 10px 0 10px;
}

.bio {
/* margin-top: 2px; */
font-weight: 700;
/* margin-bottom: 2px; */
}

.foto {
height: 100%;
border-radius: 50%;
background-color: aqua;
}

.details {
width: 85%;
text-align: justify;
}

Код: Выделить всё

[img]https://robohash.org/test[/img]
Meow Meow Meow
Meow Meow Meow Meow Meow Meow

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam,
doloremque aperiam itaque officia error expedita cupiditate
excepturi laboriosam labore veniam sit, minima ullam porro repellat
ducimus possimus obcaecati tenetur voluptatem.

когда я открываю это в Firefox, все вроде нормально, работает нормально, но открываю это в chrome или в Opera GX детали div перекрываются с профилем div, размер изображения отличается от Firefox. Я попробовал установить верхний предел поля, чтобы разделить их, но в Firefox это выглядит странно со слишком большим пространством посередине.
Я делаю что-то неправильно или это нужно обрабатывать по-разному в разных браузерах?

Подробнее здесь: https://stackoverflow.com/questions/782 ... nd-firefox