当窗口非常小时，Flex项目背景颜色消失

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

只需对身体和html标签使用自定义填充和边距，如下所示：

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

还有一个变化，但这是因为滚动条出现，所以如果这是一个问题，你可能也想将overflow-Y:scroll;添加到身体。实例：https://jsfiddle.net/3rejgk5b/6/

Answer 2

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

liquibase --defaultsFile=my.properties --propertyProviderClass=info.farhdine.MyProperties validate

Revised Fiddle