How to remove gaps in flexbox?

Question

I have built a tab in flexbox with :target which shows .details div when it is clicked. Unfortunately the .details div is very high and has a huge gap at the bottom of the paragraph. Is there a solution in CSS to remove this gap?

Demo: https://jsfiddle.net/ocgjrzre/

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  // height: 200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
}

.button{
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  &:hover{
    text-decoration: none;
    color: #333;
    background-color: #fff;
  }
}
.button{
  width: 25%;
  margin-bottom: 0.5rem;
}
.details{
  width: 70%;
  display: none;
  height: 100%;
  order: 1;
}
.one{
  // display: block;
  // order: 1;
}
.two{
  // display: block;
}
.three{
  // display: block;
}


div:target{
  display: block;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Wrap One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Wrap Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Wrap Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

Michael Benjamin · Answer 1 · 2017-09-13T11:10:20.217

In order for flex items to wrap in a column-direction container, you should set a height on the container. This sets a definite breakpoint that tells the items when to create a new column.

In your code, there is no height limit on the container. Therefore, wrapping is based on content size and may vary by browser. The reason for the extra space in the details box is align-items: stretch, a flex default which tells items to consume all free space in the cross axis.

You can disable this feature with align-items: flex-start (among other values), which solves the problem, except it creates a new problem: the flex items may no longer wrap.

Hence, unless you want to restructure your HTML or use another technology, such as CSS Grid, your best bet is to set a height on the container, which will give you more stability and control.

Here's a version of your layout with a max-height on the container:

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  max-height: 200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  &:hover {
    text-decoration: none;
    color: #333;
    background-color: #fff;
  }
}

.button {
  width: 25%;
  margin-bottom: 0.5rem;
}

.details {
  width: 70%;
  display: none;
  height: 100%;
  order: 1;
}

.one {
  // display: block;
  // order: 1;
}

.two {
  // display: block;
}

.three {
  // display: block;
}

div:target {
  display: block;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

Here's your layout working nicely with CSS Grid:

.my-wrap {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: .5rem;
  width: 90%;
  margin: 50px auto;
  color: #fff;
  grid-template-areas: " link-one details "
                       " link-two details "
                       " link-three details "   
                       "    ....     details "
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: blue;
}

.wrap-three {
  background-color: green;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  }

.button:hover {
    background-color: #000;
}

.details {
  grid-area: details;
  display: none;
}

.wrap-button-one {
  grid-area: link-one;
}

.wrap-button-two {
  grid-area: link-two;
}

.wrap-button-three {
  grid-area: link-three;
}

div:target {
  display: block;
}

p {
  margin: 10px;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

jsFiddle demo

unfortunately sometime content size may vary – Mo. Sep 13 '17 at 07:43 — Mo., Sep 13 '17 at 07:43
what you think doing this in `display: grid` ? – Mo. Sep 13 '17 at 07:48 — Mo., Sep 13 '17 at 07:48

Pytth · Answer 2 · 2017-09-13T01:01:12.450

0

( A fiddle would help out a ton )

But the problem is almost certainly the margin on the bottom of your buttons.

.wrap-button-three.button {
     margin-bottom: 0;
}

Edit: Now that your problem is more apparent, here is a fiddle. https://jsfiddle.net/ocgjrzre/2/

(I didn't use your fiddle code because it was easier for me to start from scratch to illustrate the point I am trying to make.)

The problem is, with flexbox, one really needs to consider they layout of their elements.

In your case, because you want the buttons on the left, and the messages on the right, you will want to have them in two separate flex containers that exist side by side.

Edit: You also need to not make the "details" items have a height of 100%

edited Sep 13 '17 at 01:01

answered Sep 12 '17 at 21:37

Pytth

4,008
24
29

The question updated with fiddle & image. Hope you can identify the issue now – Mo. Sep 12 '17 at 21:41
Still there is gap in `.details` same like the image in question – Mo. Sep 12 '17 at 22:18
I updated my response. You will want to break all of your "details" into a flex container separate from your buttons. – Pytth Sep 12 '17 at 22:27

score -1 · Answer 3 · answered Sep 12 '17 at 21:38

-1

It looks like you just need to remove the margin below your last item.

Add this:

.three { margin-bottom: 0; }

answered Sep 12 '17 at 21:38

jack

2,894
1
13
23

The question updated with fiddle & image. Hope you can identify the issue now – Mo. Sep 12 '17 at 21:41

How to remove gaps in flexbox?

3 Answers3

Linked