How to make the block stretch across the width?

Question

If you narrow the window by less than 1000px, a horizontal scroll appears, if you move it, you can see that the div stretches the body more than the scope, but the header does not stretch after it. How can this be fixed?

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>

Answer 1 · 2017-07-01T15:56:47

Option 2

An external <div> added here <div>

 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; }

 <div> <header></header> <div></div> </div>

Answer 2 · 2017-07-01T15:45:58

Option 1

Absolute size is width: 819px

 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: 819px; height: 100px; } div { background-color: lightcoral; width: 1000px; height: 100px; height: 100px; }

 <header></header> <div></div>

How to make the block stretch across the width?

2 answers 2

More articles: