Possible to have a 100% wide div but limit it's contents to a set max-width?

Question

I know this can easily be done with 2 divs, having the outer one be set to 100% width, and the inner one be set to max-width 1000px for example.

I'm just curious if it can be done with only one div instead of two.

Answer 1

Yes, this is possible,

because an html element is never 'just 100%'. It has to be 100% of something else. Either it is 100% related to the first element containing it that has position relative, absolute or fixed. Or 100% related to the window.

The max-width will take over from the width when the surrounding container (this can be the window) grows larger than 1000px.

Check the snippet below. if you resize the window in full window view, there will be no scrollbars.

.testwidth {
  background: yellow;
  height: 100px;
  max-width: 1000px;
  width: 100%;
}

<div class="testwidth">heyho</div>