这段标记应该生成一个高度为30像素、宽度为600像素的居中框。但实际上,它会使框缩小到没有宽度(或者如果有内容,则缩小到最小内容宽度)。想知道如何使居中框保持600像素宽并在较小的窗口大小下响应。
* {
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>