html - 响应式内容+边栏:新行中边栏分隔符的最小宽度

我的测试响应设计有问题。

如果达到最小宽度，则侧边栏永远不会在下一行中断。 （如果分辨率低于600像素，则溢出/滚动条就可以了）

代码：

body {
  padding: 0;
  margin: 0;
  width: 100%;
}

.wrapper {
  min-width: 600px;
  max-width: 800px;
  margin: auto;
}

.wrapper::after {
  content: "";
  display: block;
  clear: both;
}

.content {
  float: left;
  width: 75%;
  background: lightblue;
}

.sidebar {
  float: right;
  width: calc(25% - 20px);
  min-width: 150px;
  background: lightgrey;
  margin-left: 20px;
}

<div class="wrapper">
  <div class="content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    min-widht <br>
    sidebar
  </div>
</div>

（在全窗口中打开）

补充工具栏具有最小宽度（需要此最小宽度以确保内容显示精美）。取而代之的是缩小内容。它可以一直工作到特定的分辨率/调整大小，然后中断。

仅供参考：请不要使用JS解决方案。

提前致谢

最佳答案

尝试使用flexbox：


您可以避免明确的修补程序
父容器在浮动时不考虑孩子的尺寸


下面的代码段（添加了注释）：

body {
  padding: 0;
  margin: 0;
  width: 100%;
}
.wrapper {
  min-width: 600px;
  max-width: 800px;
  margin: auto;
  /* set flex on parent */
  display: flex;
  flex-direction: row;
}
/* .wrapper::after {
  content: "";
  display: block;
  clear: both;
} */

.content {
  /* float: left; */
  width: 75%;
  background: lightblue;
}
.sidebar {
  /* float: right; */
  width: calc(25% - 20px);
  min-width: 150px;
  background: lightgrey;
  margin-left: 20px;
}

<div class="wrapper">
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    min-widht
    <br>sidebar
  </div>
</div>