Unexpected Empty Space Using Flexbox

Unexpected empty space using flexbox

It's somehow a bug but here is my explanation of the behavior:

Let's remove some properties and follow the code.

.OutterContainer {  display: flex;  flex-wrap: wrap;  /*flex-direction: column;*/  background-color: orange;}
.InnerContainer {  display: flex;  background-color: blue;}
.InnerItem {  /*flex-basis: 90%;*/  background-color: purple;}

<div class="OutterContainer">  <div style="border:1px solid;">    <div class="InnerContainer">      <div class="InnerItem">        <img src="http://via.placeholder.com/100x100">        <img src="http://via.placeholder.com/100x100">      </div>    </div>  </div></div>

Unwanted space between wrapping flex-items

The correct answer without adding extra markup, is align-content: flex-start; - default is stretch, that's why wrapping elements have extra space between them, when the flex-container's size exceeds the size of the elements in it.

Flexbox with unexpected whitespace at top

Remove the margin top on your active menu

.nav > .active {
    /** margin-top: 10px; Remove **/
}

CSS Flex - Filling empty space with divs

In this particular case, flex didnt seem to inherit the correct values for height: 100% and min-height: 100% - so I tried to use some calc() functions that I found in another question (unfortunatly I lost the link as I was doing the research on another computer)

Please find below my working solution for this somewhat unique issue. I truely hope it helps someone else;

#content_wrapper {
  position: relative;
  display: block;
  min-height: calc(100vh - 60px);
  left: 0px;
  margin-left: 230px; }

Instead of using flex, I mixed vh (vertical height) and css calc() together to remove the value of my small header bar and set the remaining value as my minimum height instead of trying to fill empty space (Tackle the problem from the reverse direction)

While I am still open to suggestions on more relevant or improved code, this code is working perfectly to the requirements of my original post.

Weird issue using flex and white-space: nowrap (text overflows)

If you want to keep the size of .flex element (div), try this:

There was an close curly bracket mistake.

.flexContainer {
    display: flex;
  justify-content: space-between;
  width: 480px;
  margin: 32px 0;
}

.flex {
    display: flex;
    width: 45%;
    outline: 2px dashed blue;
}
    span {
        margin-right: 8px;
    }
    
    input {
        flex-grow: 1;
        overflow: auto;
    }

.no-wrap {
    white-space: nowrap;
}

<div class="flexContainer">
    <div class="flex">
         <span>Multiple workds</span>
         <input type="text">
    </div>
    <div class="flex">
         <span>Multiple workds</span>
         <input type="text">
    </div>
</div>

<div class="flexContainer">
    <div class="flex">
         <span class="no-wrap">Multiple workds</span>
         <input type="text">
    </div>
    <div class="flex">
         <span  class="no-wrap">Multiple workds</span>
         <input type="text">
    </div>
</div>

CSS display:flex adds some unwanted space

Flexbox works the other way around, it reacts to its parent size.
I would suggest to use grid here:

div {
 background: purple;
}

ul {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

css flexbox item width grows unexpectedly

Replace flex-grow with flex only because when you add flex-grow as soon as you add some contents in that container it will make it grow so use flex instead.

Example

  .flexbox-container1 {
  background-color: crimson;
  display: flex;
  gap: 10px;
  justify-content: center;
  height: 100%;
}

.flexbox-items1 {
  height: 200px;
  flex: 1;
  align-self: center;

<div class="flexbox-container1">
  <div class="flexbox-items1" style="background-color: green;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="flexbox-items1" style="background-color: green;"></div>
</div>

Unexpected behavior controlling overflow in Flexbox code

flex-shrink

An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.

.topRow {
   height: 100px;
   flex-shrink: 0;
}

OR

.topRow {
   flex: 0 0 100px; /* flex-grow, flex-shrink, flex-basis */
}

For more details, see the The flex-shrink factor section in my answer here:

• What are the differences between flex-basis and width?

---

min-height: auto

An initial setting of flex container is min-height: auto. This means that flex items cannot be smaller than the height of their content. To override this setting use min-height: 0 or overflow: auto.

.content {
   overflow: auto;
}

See this post for more details:

• Why don't flex items shrink past content size?

To understand why your layout worked in Chrome but not Firefox, see the Browser Rendering Notes section in my answer to the post above.

---

jsFiddle demo

 .flex-grid {   display: flex;   flex-direction: column;   height: 100vh; }
 .topRow {   background-color: gray;   height: 100px;   flex-shrink: 0; /* new */   border: 2px solid black; }
 .bottomRow {   background-color: cadetblue;   border: 2px solid black;   /* height: 50px; */   flex: 0 0 50px; /* new */ }
 .content {   background-color: orange;   border: 2px solid black;   flex: 1;   display: flex;   flex-direction: row;   justify-content: space-between;   overflow: auto; /* new */ }
 body {   margin: 0; }

<div class="flex-grid">  <div class="topRow">Top div</div>  <div class="content">    <div>      <p>First column</p>    </div>    <div style="display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">      <p>first row</p>      <p>2 row</p>      <p>3 row</p>      <p>4 row</p>      <p>5 row</p>      <p>6 row</p>      <p>7 row</p>      <p>8 row</p>      <p>9 row</p>      <p>10 row</p>      <p>11 row</p>      <p>12 row</p>      <p>13 row</p>      <p>14 row</p>      <p>15 row</p>      <p>16 row</p>      <p>17 row</p>      <p>18 row</p>      <p>19 row</p>      <p>20 row</p>      <p>3-1 row</p>      <p>3r2 row</p>      <p>3r3 row</p>      <p>3r4 row</p>      <p>3r5 row</p>      <p>3r6 row</p>      <p>3r7 row</p>      <p>last row</p>    </div>    <div>      <p>The last column</p>    </div>  </div>  <div class="bottomRow">Bottom div</div></div>

---

Related Topics