Geek Answers Handbook

Why break break element takes up space in flexbox

I have the following snippet. It displays 4 columns in one row. When you click on any top button, the script will add a new element <div class="break-row" />based on the button pressed, which breaks the columns into a new row. The problem here is that the element .break-rowoccupies vertical space, even when its height is 0px. I think in this case the element .colshould fill the vertical free space.

My goal is to remove the grayed out empty area and the element to .colstretch itself to this area. What is the explanation for this gray area and how can I get rid of it?

$('a').on('click', function(e) {
  e.preventDefault();
  $('.break-row').remove();

  var breakAfter = $(this).data('breakafter');
  if (breakAfter > 0) {
    $('<div class="break-row" />').insertAfter('.col:nth-child(' + breakAfter + 'n)');
  }


});
.row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  background: #222;
  width: 500px;
  height: 500px;
}

.col {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
}

.break-row {
  width: 100%;
  flex: 0 0 auto;
  height: 0px;
}

a {
  background: #456;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  display: inline-block;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-breakafter="1">
Break after every col
</a>
<a href="#" data-breakafter="2">
Break after every 2 col
</a>
<a href="#" data-breakafter="3">
Break after every  3 col
</a>
<a href="#" data-breakafter="0">
No break
</a>

<div class="row">
  <div class="col" style="background:#0f0;width:10%;">
    aaa
  </div>
  <div class="col" style="background:#f00;width:40%;">
    bbb
  </div>
  <div class="col" style="background:#0f0;width:30%;">
    ccc
  </div>
  <div class="col" style="background:#f00;width:20%;">
    ddd
  </div>
</div>
Run code
+6
source share
1

, 50% cols, , , , , 25%.

JS

$('a').on('click', function(e) {
  e.preventDefault();
  $('.break-row').remove();
  $('.row').removeClass('always-break')

  var breakAfter = $(this).data('breakafter');
  if (breakAfter > 0) {
    $('<div class="break-row" />').insertAfter('.col:nth-child(' + breakAfter + 'n)');

    if (breakAfter === 1) {
       $('.row').addClass('always-break')
    }
  }


});

CSS

.row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  background: #222;
  width: 500px;
  height: 500px;
}

.col {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  min-height: 50%;
}

.row.always-break .col{
    min-height: 25%;
}

.break-row {
  width: 100%;
  flex: 0 0 auto;
  height: 0px;
}

a {
  background: #456;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  display: inline-block;
  color: #fff;
}
0

More articles:


All Articles