html - 响应式内容+侧边栏 : min-width for sidebar breaks in new line

Question

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

如果达到最小宽度，侧边栏永远不应该在下一行中断。 (如果分辨率低于 600px，溢出/滚动条就可以了)

代码:

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>

(全屏打开)

侧边栏有最小宽度(需要这个最小宽度以确保内容显示良好)。相 react 该让内容变小。它一直有效，直到达到特定分辨率/调整大小，然后中断。

仅供引用:请不要使用 JS 解决方案。

提前致谢

Answer 1

尝试使用 flexbox:

• 您可以避免清除修复
• 父容器在 float 时不考虑子容器的尺寸

下面的片段(添加评论):

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>