How to remove gaps in flexbox?

问题

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>

回答1:

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

回答2:

( 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%