电子中的 Flexbox 行为怪异答案

【问题标题】：Flexboxes in electron acting weird电子中的 Flexbox 行为怪异
【发布时间】：2021-02-22 21:43:39
【问题描述】：

我的电子应用中有 2 个 div。左边一个，宽度固定，用作导航菜单。另一个应该根据单击导航中的哪个项目来显示内容。对于这个正确的 div，我尝试在 css 中使用 flex: 1; 以使其占用包装器 div 中的剩余空间。在我的 jsfiddle (https://jsfiddle.net/bhL8t7ny/) 中，这工作得非常好。但当然在电子中它没有。不过，我似乎找不到有效的修复方法。

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

而css如下：

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

我无法发现我的错误，这与我过去在 jsfiddle 中测试的完全一致。有人知道这里出了什么问题吗？

感谢任何帮助！

【问题讨论】：

标签： html css flexbox electron

【解决方案1】：

问题是您在代码中使用了flex-direction: column。您会注意到，如果您将 flex-direction: column 添加到您的 js-fiddle，它也将不再按您想要的方式工作。删除flex-direction: column，因为您希望将东西放在一行而不是一列中，然后您就可以开始了！如果你真的想要，你可以声明flex-direction: row，但是由于row已经是默认的flex方向，所以没有必要。

【讨论】：

我不这么认为。如果我 add flex-direction: column; 到 jsfiddle 它仍然有效。请记住，flex-direction: column 适用于该.sidebar div 的子级。

【解决方案2】：

我意识到我的愚蠢错误。我将内容 div 的类更改为 id。所以在 css 中我需要输入 #content 而不是 .content 才能访问该元素。

【讨论】：