18

I am using flexbox to layout div's. When I have a lot of li's inside the div, (with each li having a width of 100%/3) the top gets cut off. So I searched online, and they said to insert margin: auto to the inner div. When I do that, I get a new problem. Let me show you:

With margin: auto not applied:

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:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
    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>

JSFiddle

Problem: flex-start works, but the top is cut off.

With margin: auto applied:

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:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
    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>

JSFiddle

Problem: flex-start doesn't work, but top is not cut off.

My question is, how can I have justify-content: flex-start and have the top not get cut off?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jessica
  • 9,379
  • 14
  • 65
  • 136

3 Answers3

11

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Now if I don't have as many `li's`, `align-items: center` doesn't work. Lemme show you: http://jsfiddle.net/e0ctrmut/1/ – Jessica Nov 02 '15 at 20:50
  • @Jessica I thought you wanted to align the items to the top? – Oriol Nov 02 '15 at 20:54
  • I want to have both options. (You're right, I didn't say that in my question.) – Jessica Nov 02 '15 at 20:56
  • 1
    @Jessica Then I suggest switching between `#innerWrapper {margin-bottom:auto}` and `#innerWrapper {margin-top:auto;margin-bottom:auto}`. – Oriol Nov 02 '15 at 21:03
  • `margin-top:auto;margin-bottom:auto` causes weird results – Jessica Nov 02 '15 at 21:07
  • @Jessica Which weird results? – Oriol Nov 02 '15 at 23:26
  • Oh, never mind! I didn't add a semi-colon at the end of it. (Wasted so much time for just 1 semi colon!) Lemme do some testing, and see if I have it. You're saying I have to use JavaScript, right? – Jessica Nov 02 '15 at 23:38
  • *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.* This works when the content overflows on the top. It doesn't seem to have an effect when content overflows on the left. To solve a horizontal scroll limitation, I've only come up with a series of hacks. Any ideas? http://stackoverflow.com/questions/33590889/when-centering-horizontally-lis-get-cut-off – Michael Benjamin Nov 08 '15 at 14:16
  • 1
    @Michael_B That case is problematic because a multicolumn flexbox with `width: auto` doesn't increase its width to cover all columns, only the first one. Then I don't know how to center it properly. – Oriol Nov 08 '15 at 17:14
10

use

.flex-parent{
  display: flex;
  align-items: center;
  justify-content: center;
}


.flex-child{
  margin-top: auto;
  margin-bottom: auto;
}
Sushil Thapa
  • 564
  • 7
  • 17
2

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.

Community
  • 1
  • 1
logic8
  • 874
  • 9
  • 21