Responsive Content +侧边栏：最小宽度的侧边栏中断新行

Question

我有一个测试响应式设计的问题。 如果达到最小宽度，侧栏永远不会在下一行中断。 （溢出/滚动条是好的，如果分辨率是温特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>

（全窗口打开）

边栏具有最小宽度（需要这个最小宽度以确保内容显示效果很好）。相反，应该减小内容。它一直运行到一个特殊的解决方案/调整大小，然后中断。

fyi：请不要JS解决方案。

在此先感谢

Answer 1

尝试用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>