Здравствуйте, помогите разобраться с проблемой.
Задал 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;
}