CODEWITHSUNDEEP
htmlcssflexbox
dnaranjo
dnaranjo

Reputation: 3784

Unexpected empty space using Flexbox

I've reduced the problem to the minimum possible where the issue is still present.

enter image description here

I don't understand where the orange space is coming from.

A clue: Removing one image the orange space goes away.

.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>
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

Upvotes: 5

Views: 5296

Answers (5)

manu.valentin
manu.valentin

Reputation: 61

I had a similar problem, and I found that setting

.OutterContainer > div {
 width: 100%;
}

solved the issue, even though in practice the width of the div does not change with this setting, it hinders the browser to render the empty space (orange) below.

I could not fully understand the cause of the problem, but I noticed that the empty (orange) space appears to take the same height as the last flex child element inside the flex container (.InnerContainer). Indeed if you manually set the height of the second image to 25px f.ex., the empty space will have a height of 25px as well, independently from the height of the first image.

It seems as if the browser wanted to wrap the last flex child to a new line and creates the space for it, but the wrap is not happening of course because there is enough space in the first line.

Upvotes: 0

Dominik Dorč&#225;k
Dominik Dorč&#225;k

Reputation: 1

In case anybody runs in similar issue here is workaround that worked for me. For parent element set line-height to 0. Then set min-height for all children so they don't shrink too much. You still have lot of empty lines on bottom of parent element... but they don't take any space.

Upvotes: 0

Black Beard
Black Beard

Reputation: 1608

I had similar problem in React Material-UI library. I got huge empty space below the TableContainer in this code:

<Grid item>                    
    <TableContainer>
        <Table>
            <TableHead>
                <TableRow>
                    //some cells
                </TableRow>
            </TableHead>
            <TableBody>
                    //some rows
            </TableBody>
        </Table>
    </TableContainer>

   //here I got huge empty unexpected space

</Grid>

Then I add container keyword in Grid and empty space disappeared.

<Grid item container>                    
    <TableContainer>
        <Table>
            //the same code
        </Table>
    </TableContainer>
</Grid>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272909

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>

This code seems ok. We have a flex container with a row direction and a div as a flex item. This div will by default fit its content width. Same thing for the innerItem. Now by adding a flex-basis lower than 100% both images won't fit the container width and we will have a line break thus the height of all the elements will increase (including the orange box).

.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>

Now if we switch to a column direction the same height is kept. It's like the browser did the calculation of the height based on the row direction and kept the result for the column direction.

.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>

There is also the fact that the default alignment is strech so if you change the alignment to something else we will get back to the previous state:

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items:flex-start;
  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>

With one image you cannot have the issue because logically there is no way to have a line break like with more than one.

Upvotes: 2

eqwert
eqwert

Reputation: 507

I'm assuming these pictures are supposed to wrap while they are in the .InnerItem. After playing around with your fiddle for a bit, it seems the .OutterContainer was expanding (and showing that orange space) because of its display: flex. I think this is redudant as you already specfiy display: flex inside of your .InnerContainer. I removed this CSS rule and was able to achieve the same picture wrapping by pasting multiple pictures inside of the .InnerItem.

.OutterContainer {
  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>
        <div class="InnerContainer">
            <div class="InnerItem">
                <img src="http://via.placeholder.com/100x100">
                <img src="http://via.placeholder.com/100x100">
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions