html - 如何在 HTML/CSS 中做响应式包装？

Question

这是 wrapper 全宽的样子

但是当我将屏幕最小化为移动格式时，包装器看起来像这样

你看到有一个黑色区域。我希望红色边栏将其填满，这样它就不会是黑色的。

.body {
  overflow: hidden;
}
#wrapper {
  max-width: 1520px;
  height: 880px;
  margin: 0 auto;
  background-color: black;
  width: 100%;
}
#mcontent {
  min-width: 500px;
  max-width: 1520px;
  height: 500px;
  width: auto;
  background-color: fuchsia;
  overflow: hidden;
  padding:
}
#rscontent {
  max-width: 200px;
  min-width: 100px;
  height: 500px;
  background-color: red;
  float:right;
  display: inline-block;
  width: auto;
}
#lscontent {
  max-width: 200px;
  min-width: 100px;
  height: 500px;
  background-color: red;
  float:left;
  display: inline-block;
  width: auto;
}
#content {
  height: 400px;
  max-width: 1920px;
  width: auto;
  background-color: darkviolet;
}
#content > h2 {
  color:blue;
  text-align: center;
  width: auto;
}
#content > p {
  text-align: center;
}
#content > h3 {
  text-align: center;
}
#content > h4 {
  text-align: center;
}

<div id="wrapper"> 
  <div id="content">
    <h2>AgencyGaming</h2>
    <h3>Slogan</h3>
    <h4>Information</h4>
  </div>
  <div id="rscontent"></div>
  <div id="lscontent"></div>
  <div id="mcontent">
    <h2 style="color:white;">Hej</h2>
  </div>
</div>

Answer 1

内容的最小宽度为 500 像素。它在桌面上工作正常，但在移动格式中，窗口宽度小于 500px，#mcontent div 的宽度将减少到 500px。由于 min-width:500px，它不会减少到 500px，所以 #mcontent div 在下一行。