CSS Flex Box Issue

scjmoore · July 14, 2018, 7:06pm

Hello, I am having issues in understanding why there is a gap between the yellow box and the rest of my boxes? I am trying to close this gap without success.

I am using Flexbox to do this layout. I have not included all the code just the relevant sections.

CSS code

html {
  height: 100%;
  font-family: sans-serif;
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
}

.column {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#left {
  flex-shrink: 0;
  background-color: #333;
  color: white;
}

#right {
  background-color: #f3f3f3;
  width: 100%;
}

.top-left {
  flex-shrink: 0;
  background-color: #333;
  color: white;
  padding: 20px;
}

.top-right {
  display: inline-flex;
  flex-shrink: 0;
  background-color: #333;
  color: white;
  padding: 20px;
}

.bottom {
  flex-grow: 1;

  overflow-y: auto;
  padding: 20px;
}

ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
}

li {
  margin-right: 20px;
}

/*Box Styleing*/

.mainDashboard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.mainDashboard>div:first-child {
  flex: 0 0 100%;
  background-color: yellow;

}
#Title {
  margin: 0;
  padding: 0;
  height: 100px;
}
.box1 {
  flex-grow: 1;
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.box2 {
  flex-grow: 1;
  background-color: red;
  width: 100px;
  height: 100px;
}
.box3 {
  flex-grow: 1;
  background-color: blue;
  width: 100px;
  height: 100px;
}
.box4 {
  flex-grow: 1;
  background-color: green;
  width: 100px;
  height: 100px;
}

<div id="Title">
  <p>Asset Dashboard</p>
</div>

<div class="box1">
  <p>I am box1</p>
</div>

<div class="box2">
  <p>I am box2</p>
</div>

<div class="box3">
  <p>I am box3</p>
</div>

<div class="box4">
  <p>I am box4</p>
</div>

SamA74 · July 14, 2018, 7:17pm

You are actually missing code to re-create the problem, but I have managed to piece enough together to get some idea what is going on.
I’m putting it down to the height: 100% display: flex settings on the body.
Are those really needed?

scjmoore · July 16, 2018, 7:44pm

Hi SamA74,

Thanks for your help, I have removed the height:100% from the body and this indeed has resolved my original issue, however My left hand menu is not at 100% full height even if I add the following code.

#left {
    flex-shrink: 0;
    background-color: #333;
    color: white;
    height: 100%;
}

I have also added the full code:

HomePage

<body>
    
    






        <div id="left" class="column">
			<div class="top-left">Top Left</div>
			<div class="bottom">
                <hr />
                <p>Asset Control</p>
                <hr />
				<p><i class="fas fa-plus-circle"></i> Add Asset</p>
				<p><i class="far fa-eye"></i> View Asset</p>
                <hr />
                <p>Stock Control</p>
                <hr />
				<p><i class="fas fa-plus-circle"></i> Add Stock</p>
				<p><i class="far fa-eye"></i> View Stock</p>
				
			</div>
		</div>
		<div id="right" class="column">
			<div class="top-right">
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
					<li>four</li>
				</ul>
			</div>
			<div class="bottom mainDashboard">
                <asp:ContentPlaceHolder id="MainContent" runat="server">

                 </asp:ContentPlaceHolder>

				
                
			</div>
		</div>





       
     
          
         

  
</body>
</html>

I needed to keep the display:flex in the body when I remove it the layout falls apart.

Ray.H · July 16, 2018, 9:13pm

Hi,
That’s because it no longer has a parent height to reference from.

Have you tried vh (viewport height)

height: 100vh;

ronpat · July 16, 2018, 9:26pm

<ot>
@scjmoore,

Selected snippits of code infrequently include all of the relevent code (in spite of best intentions). As such (and as demonstrated in many of our responses to members) we appreciate members posting a “working page” that actually demonstrates their issue.

A “working page” begins with the <!doctype html> that you are using, it includes the <head> section with full URLs to assets (not local URLs) and the CSS is between <style> tags, the <body> section of course, and places most JS at the end of the page just before the </body> tag, and finally ends with </html>. It is also reasonably well formatted for readability.

If you double-click the file (the “working page”) on your computer, it will open in your browser and should display the problem behavior, which means that when we copy it to a file and open it in our browsers, we will see what you see. You can use the “working page” to systematically remove irrelevent code and know that the HTML and CSS that remains continues to demonstrate the problem.

Some members prefer to create a simplified test site where suggestions can be tested and just post the URL to that test site.

The goal, of course, is to help us help you resolve the issue as quickly and effectively as possible.

Forum POSTING BASICS: (Help us help you!)

</ot>

ronpat · July 16, 2018, 9:31pm

You may want to make that {min-height:100vh} rather than height. Otherwise, if the menu is taller than the page height, the background image/color may cut off at 100vh.

Ray.H · July 16, 2018, 10:49pm

Yes, it will need that or overflow:auto; to insure access to content on smaller screens.

I’m not sure what the OP’s intentions are, it looks like it might be some sort of control panel. There’s been no mention of it, but it looks like it could be a fixed position sidebar, in that case it would need overflow:auto; . Otherwise min-height:100vh if the sidebar is to scroll with the rest of the page.

scjmoore · July 17, 2018, 10:35am

Thanks Ray.H and Ronpat for your help. yes Ray.H you are correct I am making a Dashboard for my Asset register

system · October 16, 2018, 5:35pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.