html - 如何制作居中、动态宽度的 flexbox

Question

此标记应生成一个高 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>

Answer 1

请试试这个。将 width:100% 赋给 body > div > div 和 body > div > div > div 类。

* {
  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>