ウィンドウが非常に小さいときにフレックスアイテムの背景色が消える

Question

幅275pxの左の列と幅の残りの部分が右の列になるレイアウトを作成しようとしています。私は両方の列が同じ高さ（最も高い要素の高さ）になりたいです。

私はflex表示プロパティを使用して最高の仕事だろうと思った：

.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> 

これは、ブラウザのウィンドウが非常に小さいサイズが変更されたときを除いて正常に見える、右の列の背景色にはありません列の幅全体を埋める。

この例を参照してください：https://jsfiddle.net/3rejgk5b/2/（非常に小さいブラウザウィンドウのサイズを変更）

編集：ここで私が見ているもののイメージがある：

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

をするだけのカスタムパディングとマージンを使用このようなbodyタグとhtmlタグの場合は、

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

まだ変更がありますが、スクロールバーappeaが原因ですリングなので、本体にoverflow-Y:scroll;を追加したい場合は、それが問題です。ライブ例：https://jsfiddle.net/3rejgk5b/6/