Если сузить окно меньше, чем на 1000px, появится горизонтальный скролл, если его подвинуть то видно, что div
растягивает body
больше, чем область видимости, но header
не растягивается вслед за ним. Как это можно исправить?
https://jsfiddle.net/z2rrrcf3/2/
body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
}
header {
background-color: #000;
display: block;
align-self: stretch;
min-width: 110px;
width: 100%;
height: 100px;
}
div {
background-color: lightcoral;
width: 1000px;
height: 100px;
height: 100px;
}
<header></header>
<div></div>
@media screen and (min-width: 900px){ ....}