Как заставить родительский элемент div сжиматься до размера дочернего видеоэлемента – непоследовательно в разных браузер ⇐ CSS

[Anonymous]

У меня есть элемент видео, вложенный в элемент div. Этот элемент div вложен в другой элемент div.

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

Проблема в том, что я хочу, чтобы .videoContainer (зеленый) уменьшился до размера .videoPlayer (синий)< /strong> и не расширяться до размера .centerSection (red). Я просмотрел другие вопросы StackOverflow и искал где-то еще, но безуспешно.
То, что я сейчас получаю, показано на изображении ниже. .centerSection имеет красную рамку. .videoContainer имеет зеленую рамку. .videoPlayer имеет синюю рамку.


CSS, который позволил достичь этого результата, выглядит следующим образом.

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

.centerSection {
border: 6px solid red;
width: 50%;
max-width: 50%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.videoContainer {
border: 6px solid green;
max-width: 100%;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.videoPlayer {
border: 6px solid blue;
max-width: 100%;
max-height: 100%;
}

Как мне заставить .videoContainer (зеленый) плотно обернуть .videoPlayer (синий)?Обновление:
Оказывается, что приведенный выше CSS работает так, как я ожидал, в браузере Chrome, но не в Firefox, который я использовал все время. Как мне заставить его работать в Firefox/во всех браузерах?

Подробнее здесь: https://stackoverflow.com/questions/784 ... nt-inconsi