@happyandluck777

Как поставить видео на всю ширину флекс элемента?

Здравствуйте, помогите разобраться с проблемой.
Задал body display:flex, flex-direction:column высота и ширина 100%, такое же задал и в html
У меня первый блок- флекс элемент имеет размеры flex: 0 0 50% (так как основная ось Y, то получается высота 50% от высота экрана браузера).
А что насчет ширины, так как блочный элемент он занимает всю ширину, можно ли это отрегулировать во флексе? Не могу поставить видео с размерами 960*540 на всю ширину родительского блока, выходит за рамки всегда , а по высоте, когда задаю в видео 100% занимает всю высоту родителя. Обьясните плиз как это работает, заранее благодарен
*,
*::after,
*::before {
box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.bodyflexcontainer{
    display: flex;
    flex-direction: column;
}

.divflexelement {
    background-color: yellow;
    flex: 0 0 50%;

}
.video {
    height: 100%;
    width: 100%;
}


какжется решил вопрос так
*,
*::after,
*::before {
box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.bodyflexcontainer{
    display: flex;
    flex-direction: column;
}

.divflexelement {
    background-color: yellow;
    height: 60%;
    width: 100%;
    flex: none;
}
.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы