Flexboxes in electron acting weird

user_8661500 0
Viewed 563

I have 2 divs in my electron app. One on the left, with a fixed width, acting as a navigation menu. The other one is supposed to display content depending on which itme in the nav is clicked. For this right div I try to use flex: 1; in css to make it take up the remaining space in my wrapper div. In my jsfiddle (https://jsfiddle.net/bhL8t7ny/) this worked perfectly fine. But of course in electron it didn't. I can't seem to find a valid fix though.

My html looks like this:

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

And css is as follows:

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

I can't spot my mistake, this is exactly in line with what I used to test this out in the jsfiddle. Anyone know what's going wrong here?

Appreciate any help!

flexbox electron css html
2 Answers

The issue is that you are using flex-direction: column in your code. You'll notice if you add flex-direction: column to your js-fiddle, it will also no longer work the way you want. Remove flex-direction: column since you want things placed in a row, not a column, and then you should be good to go! You could declare flex-direction: row if you really wanted, but since row is already the default flex direction, there is no need.

user_101196260

I realized my idiotic mistake. I changed the content div's class to an id. So in css I would need to type #content instead of .content to be able to access that element.

user_86615000
Related