レスポンシブコンテンツ+サイドバー：新しい行のサイドバーの分割の最小幅

Question

テストレスポンスデザインに問題があります。 min-widthに達すると、サイドバーが次の行に折れることはありません。 （解像度がウンター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>

（フルウィンドウのオープン）

サイドバーは、（最小幅を有しているがコンテンツの表示がうまくいくように、この最小幅が必要です）。代わりに、コンテンツを小さくする必要があります。これは、決まった解像度/サイズ変更が行われてから壊れるまで動作します。

fyi：JSソリューションをしないでください。事前

Answer 1

で

おかげでフレキシボックスで試してみてください。

• あなたは（追加の下

スニペットを浮動とき

親コンテナが子の大きさを考慮していない明確な修正を避けることができますコメントしました）：

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>