Flexbox sizing issue

user_8981814 0
Viewed 42

I have a flex box with 2 elements in it side by side normally elements in flexbox automatically take all the space...

but not here ... I tried to set the height manually to height:100%... nothing woks

where is my mistake? (the menu element is supposed to take all the height available, for the example I artificially made a fix height for the blue element ... but in my code it is supposed to be variable depending of the content so setting menu in pixels is not an option)

html :

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./test2.css">
</head>
<body>

        <div class="framehome">
            <div class="myaccountwrapper">
                <div class="myaccountleft">
                    Menu
                </div>
                <div class="myaccountright">
                    <div id="windowmyaccount" class="submenu" id="boxaccount">
                      Change my Handle
                    </div>
                    <div id="windowhandle" class="submenu" id="boxaccount">
                       Change my Handle
                    </div>
                </div>
            </div>
        </div>
</body>

CSS :

    .myaccountwrapper{
    display:flex;
    flex-direction:row;
    align-items:center;
    color:lightgrey;
    background-color:green;
}

.myaccountleft{
    display: flex;
    flex-direction: column;
    width:250px;
    height:100%;
    background-color:red;
}

.myaccountright{
    flex-grow: 1;
    background-color:blue;
    height:300px;
}
flexbox css html
1 Answers

You set the align-items property of the parent .myaccountwrapper to the value of center which prevents the default behavior of the flex-items, which is to fill the parent's height.

By default the value of the align-items property is set to stretch which causes the flex-items to stretch along the vertical / cross axis.

So to solve your problem just remove or comment out the align-items property on the parent.

I'm assuming you want to fill the entire viewport height so I've set the height of the parent to 100vh.

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.myaccountwrapper {
  display: flex;
  /*align-items: center; the culprit */
  color: lightgray;
  background-color: green;
  height: 100vh; /* needs to be set if you want that flex-items fill the viewport height */
}

.myaccountleft {
  display: flex;
  flex-direction: column;
  width: 250px;
  background-color: red;
}

.myaccountright {
  flex: 1;
  background-color: blue;
}
<div class="framehome">
  <div class="myaccountwrapper">
    <div class="myaccountleft">
      Menu
    </div>
    <div class="myaccountright">
      <div id="windowmyaccount" class="submenu" id="boxaccount">
        Change my Handle
      </div>
      <div id="windowhandle" class="submenu" id="boxaccount">
        Change my Handle
      </div>
    </div>
  </div>
</div>

And for the comparison with the align-items: center:

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.myaccountwrapper {
  display: flex;
  align-items: center;
  color: lightgray;
  background-color: green;
  height: 100vh;
}

.myaccountleft {
  display: flex;
  flex-direction: column;
  width: 250px;
  background-color: red;
}

.myaccountright {
  flex: 1;
  background-color: blue;
}
<div class="framehome">
  <div class="myaccountwrapper">
    <div class="myaccountleft">
      Menu
    </div>
    <div class="myaccountright">
      <div id="windowmyaccount" class="submenu" id="boxaccount">
        Change my Handle
      </div>
      <div id="windowhandle" class="submenu" id="boxaccount">
        Change my Handle
      </div>
    </div>
  </div>
</div>

user_28516320
Related