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>