Top gets cut off when using Flexbox
Auto margins push the flex item. If you use margin: auto, the element will be pushed equally from all sides, so it will be centered.
If you want it to be aligned to the top, only set the margin-bottom: auto, and let margin-top be 0.
#innerWrapper {
margin-top: 0;
margin-bottom: auto;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
#outerWrapper {
background-color: aqua;
height: 100%;
display: flex;
justify-content: flex-start;
/* This is ignored */
align-items: center;
overflow: auto;
}
#innerWrapper {
margin-top: 0;
margin-bottom: auto;
width: 70%;
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
}
li {
border: 1px solid black;
box-sizing: border-box;
flex-basis: calc(100%/3);
height: 100px;
}<div id="outerWrapper">
<ul id="innerWrapper">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
</ul>
</div>Alternatively, forgot about auto margins and remove the code which produces the cut:
#outerWrapper {
align-items: center;
}
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
#outerWrapper {
background-color: aqua;
height: 100%;
display: flex;
justify-content: flex-start;
overflow: auto;
}
#innerWrapper {
margin: 0;
width: 70%;
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
}
li {
border: 1px solid black;
box-sizing: border-box;
flex-basis: calc(100%/3);
height: 100px;
}<div id="outerWrapper">
<ul id="innerWrapper">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
</ul>
</div>I was having a similar problem and an internet search brought me here.
The answer above didn't work in my case, but what did work was wrapping my content container (that was getting cut off) in a div styled with a min-height:0; rule.
Note: I used min-height because I am using a columnar layout - it would be min-width for rows. In most cases using both probably wouldn't hurt.
html:
<div class="flex-fix">
<div>This content was getting cut off...</div>
</div>
css:
.flex-fix {
min-height: 0;
min-width: 0;
}
I got the clue from this article on css-tricks.com: Flexbox and Truncated Text
Hope this helps.
use
.flex-parent{
display: flex;
align-items: center;
justify-content: center;
}
.flex-child{
margin-top: auto;
margin-bottom: auto;
}