How to make centered, dynamic-width flexbox - html

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>

Answer 3

Please allow me to simplify the code to its basic components. You have a div.container that is set as display:flex. Inside that you have a div which you want to adjust according to flex parameters. The inner div is set to grow and shrink according to its container:
flex: 1 1 auto; /* shorthand for flex-grow, flex-shrink, flex-basis */
It is also set to have a max-width:600px and centered in the page with margin-left and margin-right set to auto. I believe this construct meets your requirements.
div.container {
display: flex;
border: 1px solid orange;
}
div.container div {
flex: 1 1 auto;
border: 1px solid blue;
background: red;
height: 30px;
margin: 0 auto 0 auto;
max-width: 600px;
}
<div class="container">
<div></div>
</div>