html - 向右浮动时奇怪的 div 行为

Question

我正在为我的网站制作菜单栏。

.main-menu {
  position: fixed;
  left: 250px;
  width: 100%;
  background: #f1f1f1;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 8px;
  padding-right: 8px;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: 50px;
  top: 0;
  text-align: center;
  -webkit-transition: top 200ms;
  transition: top 200ms;
  font-size: 14px;
  display : block;
  overflow: hidden;
}  
.main-menu .left {
  float: left;  	
}
.main-menu .right {
  float: right;
}

<div class="main-menu">
  <div class="left">
    The menu bar of my page
  </div>
  <div class="right">
    Right content
  </div>
<div>

我需要 left: 250px; 的菜单，但它的 width 设置为 100%。由于它是固定的，页面不会滚动(我什至不希望那样)，但是右边的 Text 不会显示，因为 div 占用的空间比页面多有。我需要 div 占用页面上的剩余空间。我怎样才能做到这一点？

Answer 1

请查看以下是否有效。

.wrap{
   display: flex;
   position:fixed;
   width:100%;
}
.main-menu {
   flex: 1;
   background: #f1f1f1;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 8px;
   padding-right: 8px;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   height: 50px;
   top: 0;
   text-align: center;
  -webkit-transition: top 200ms;
   transition: top 200ms;
   font-size: 14px;
   display : block;
   overflow: hidden;
}  
.main-menu .left {
   float: left;  	
}
.main-menu .right {
   float: right;
}

<div class="wrap">
    <div style="width:250px;"></div>
        <div class="main-menu">
      <div class="left">
        The menu bar of my page
      </div>
      <div class="right">
        Right content
      </div>
    <div>
 </div>

jsFiddle