Html 电子器件中的柔性盒_Html_Css_Flexbox_Electron

Html 电子器件中的柔性盒

html css electron

Html 电子器件中的柔性盒,html,css,flexbox,electron,Html,Css,Flexbox,Electron,我的电子应用程序中有两个div。左侧一个，具有固定宽度，用作导航菜单。另一个应该根据单击导航中的哪个itme来显示内容。对于这个右div，我尝试使用flex:1以使其占用包装器div中的剩余空间。在我的jsfiddle（）中，这非常有效。但当然，在电子方面，它没有。但我似乎找不到有效的解决办法我的html如下所示： <body> <div class="wrapper"> <div class="sidebar"

我的电子应用程序中有两个div。左侧一个，具有固定宽度，用作导航菜单。另一个应该根据单击导航中的哪个itme来显示内容。对于这个右div，我尝试使用

flex:1以使其占用包装器div中的剩余空间。在我的jsfiddle（）中，这非常有效。但当然，在电子方面，它没有。但我似乎找不到有效的解决办法
我的html如下所示：
<body>
  <div class="wrapper">
    <div class="sidebar">
      <div class="imgdiv">
        <img src="assets/icons/1x/logo_orange.png">
      </div>
      <div class="nav">
        <ul>
          <li><a id="dashboard" href="#">Dashboard</a></li>
          <li><a id="tasks" href="#">Tasks</a></li>
          <li><a id="profiles" href="#">Profiles</a></li>
        </ul>
      </div>
    </div>
    <div id="content"></div>
  </div>

  <script src="../renderer.js"></script>
  <script src="assets/js/navigation.js"></script>
</body>

我无法发现我的错误，这与我在JSFIDLE中测试的结果完全一致。有人知道这里出了什么问题吗
谢谢你的帮助
 问题在于您在代码中使用了flex-direction:column
。您会注意到，如果将flex-direction:column
添加到js提琴中，它也将不再按照您想要的方式工作。删除flex-direction:column
，因为您希望将内容放在一行而不是一列中，然后就可以开始了！如果你真的想要的话，你可以声明flex-direction:row
，但是既然row
已经是默认的flex-direction，就没有必要了。
我意识到了我愚蠢的错误。我将content div的类更改为id。因此，在css中，我需要键入#content
而不是。content
才能访问该元素。
我认为这不是问题。如果I添加弯曲方向：列到JSFIDLE它仍然有效。请记住flex direction:column
适用于.sidebardiv的子级。
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.sidebar {
    width: 150px;
    height: 100%;
    background: #080808;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content {
    flex: 1;
    background: #141414;
}