浮动时的奇怪div行为

Question

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

＆＃ 13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;   

我需要的菜单为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