Flex item Hintergrundfarbe verschwindet, wenn das Fenster sehr klein ist

Question

Ich versuche, ein Layout zu machen, das eine linke Spalte von 275px breit und eine rechte Spalte den Rest der Breite hat. Ich möchte, dass beide Spalten die gleiche Höhe haben (Höhe des höchsten Elements).

Ich dachte flex Eigenschaft display mit am besten funktionieren würde:

.jflex { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    item-align: stretch; 
} 
.left-menu { 
    width: 275px; 
    padding: 1em; 
    background: red; 
} 
.right-content {  
    width: calc(100% - 275px); 
    padding: 1em; 
    background: blue; 
} 

HTML:

<div class="jflex"> 

    <div class="left-menu"> 

    Sidebar 

    </div> 

    <div class="right-content"> 

    Main content 

    </div> 

</div> 

Das sieht gut aus, außer wenn das Browserfenster sehr kleine Größe geändert wird, tut die rechte Spalte Hintergrundfarbe nicht füllen Sie die gesamte Breite der Spalte.

Sehen Sie folgendes Beispiel: https://jsfiddle.net/3rejgk5b/2/ (Resize Ihrem Browserfenster sehr klein)

EDIT: Hier ist ein Bild von dem, was ich sehe:

Answer 1

body { margin: 0; }    /* remove default margin */ 
 

 
.jflex { 
 
    display: flex; 
 
    flex-direction: row;   /* initial setting; can be omitted */ 
 
    flex-wrap: nowrap;    /* initial setting; can be omitted */ 
 
    /* item-align: stretch;  correct property is `align-items`; 
 
            and it's an initial setting so it can be omitted */ 
 
} 
 

 
.left-menu { 
 
    /* width: 275px; */ 
 
    flex: 0 0 275px;    /* KEY RULE: don't grow, don't shrink, fixed width */ 
 
    padding: 1em; 
 
    background: red; 
 
} 
 

 
.right-content { 
 
    /* width: calc(100% - 275px); flexbox has a better way */ 
 
    flex: 1;      /* KEY RULE: tells element to consume remaining space */ 
 
    padding: 1em; 
 
    background: blue; 
 
}

<div class="jflex"> 
 
    <div class="left-menu">Sidebar test</div> 
 
    <div class="right-content"> 
 
    <h1>This would be the page title</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
 
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
 
     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
 
     culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div>

Revised Fiddle

Answer 2

Nur eine benutzerdefinierte verwenden padding und margin für den Körper und html Tags wie folgt:

body, html { 
    margin:0; 
    padding:0; 
} 

Es gibt immer noch eine Änderung, aber das ist wegen der Bildlaufleiste Appeal klingeln, also möchtest du vielleicht auch overflow-Y:scroll; dem Körper hinzufügen, wenn das ein Problem ist. Anschauliches Beispiel: https://jsfiddle.net/3rejgk5b/6/