How to make centered, dynamic-width flexbox

Question

This markup should produce a 30px high box that is 600px width, centered. But instead it shrinks the box so it is no width (or if there is content, it shrinks to the minimum content width). Wondering how to make this so the centered box is 600px, but is responsive at smaller window sizes.

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  display: flex;
}

body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
}

body > div > div {
  max-width: 600px;
  border: 1px solid black;
}

body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
}

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

Answer 1

Please try this. Give width:100% to body > div > div and body > div > div > div class.

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  display: flex;
}

body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
}

body > div > div {
  max-width: 600px;
  border: 1px solid black;
  width:100%;
}

body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
  width:100%;
}

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

Answer 2

That is the default behavior of a flex item, being as wide as its content, similar to an inline block.

The reason is its default flex-grow value, which is 0 and tells it to not fill the remaining space.

Add flex-grow: 1 to every level of flex item that should fill its parent.

* {
  position: relative;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  display: flex;
}

body > div {
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid orange;
}

body > div > div {
  max-width: 600px;
  border: 1px solid black;
  flex-grow: 1;                    /*  added  */
}

body > div > div > div {
  border: 1px solid blue;
  background: red;
  height: 30px;
  flex-grow: 1;                    /*  added  */
}

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