为什么col break元素占用了flexbox中的空间

Question

我有以下代码段。它在一行中显示4个列。当您单击任何顶部按钮时，脚本将根据单击的按钮添加新的<div class="break-row" />元素，该按钮将列拆分为新行。这里的问题是.break-row元素即使在高度为0px时也会占据垂直空间。我认为在这种情况下，.col元素应填充垂直可用空间。

我的目标是删除灰色空白区域，.col元素将自己拉伸到该区域。对于那个灰色区域有什么解释，我该如何摆脱它呢？

＆＃13;

＆＃13;

$('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)');
  }


});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该可以解决你的用例问题，我在cols中添加了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;
}