可扩展盒不断增长 [英] Expandable box keeps growing

问题描述

浏览器:Chrome

我试图设置一排盒子，里面有一个可以扩展的物品.我希望同一行上的项目具有相同的高度.当可膨胀物品折叠时，我希望容器会相应收缩.我以某种方式创建了一些东西，当盒子展开时，它会不断增大其大小.

I was trying to setup a row of boxes that have an item inside of them that can expand. I'd like the items on the same row to be the same height. When the expandable items are collapsed I expect the containers to shrink accordingly. Somehow I created something where when the box expands it keeps increasing its size.

此示例是从应用程序中提取的.因此，div的多层可能对您没有多大意义.我只是提取了重现此问题所需的最少片段.

This example was extracted from an application. So the multiple layer's of divs probably wont make much sense to you. I just extracted the minimal pieces needed to reproduce the issue.

const expandButtons = document.querySelectorAll('.expand');

for (let i = 0; i < expandButtons.length; i++) {
  const button = expandButtons[i];
  button.addEventListener("click", () => toggleExpand(button));
}

function toggleExpand(el) {
  const content = el.parentElement.querySelector('.content');
  content.classList.toggle('is-expanded');
}

.row {
  display: flex;
}

.col {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.wrapper {
  height: 100%;
}

.card-block {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  max-height: 0;
  overflow: auto;
  transition: max-height 500ms;
}

.content.is-expanded {
  max-height: 6em;
}

.spacer {
  display: flex;
  flex-grow: 1;
}

<div class="row">
  <div class="col">
    <div class="card">
      <div class="wrapper">
        <div class="card-block">
          <p>ASDF</p>
          <div class="content">
            <p>First</p>
            <p>Second</p>
            <p>Third</p>
          </div>
          <div class="spacer"></div>
          <button type="button" class="expand">Expand</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <div class="wrapper">
        <div class="card-block">
          <div class="content">
            <p>First</p>
            <p>Second</p>
          </div>
          <div class="spacer"></div>
          <button type="button" class="expand">Expand</button>
        </div>
      </div>
    </div>
  </div>
</div>

问题

展开第二个框会增加高度，并且折叠时不会缩回.扩展/折叠第一个修复了它.为什么会这样? (我对说明而非解决方案感兴趣)

Expanding the second box increases the height and it doesn't retract back when collapsed. Expanding/Collapsing the first fixes it. Why does this happen? (I'm interested in an explanation rather than a solution)

修改

我添加了示例中证明height: 100%正确的部分以避免混淆.这样我就可以将按钮保持在底部.这涉及将display: flex; flex-direction: column;添加到.card-block并添加.spacer类和相应的元素.这些不是问题的根源，而是height: 100%的原因.

I added the part of the example that justifies the height: 100% to avoid confusion. It is so that I can keep the buttons on the bottom. This involves adding display: flex; flex-direction: column; to .card-block and adding the .spacer class and corresponding element. These do not contribute to the problem but are the reason for the height: 100%.

BTW，最简单的解决方法是从.card中删除flex-direction: column.同样，我对为什么"感兴趣.

BTW, and easy way to fix it is to remove flex-direction: column from .card. Again, I'm interested in the "why".

推荐答案

注意，奇怪的行为似乎是Chrome中的错误，因为在其他浏览器中不会发生.

无论为什么发生这种情况，在.wrapper上使用height: 100%时，您都需要问自己，什么是100％?

No matter why this happens, when using height: 100% on .wrapper you need to ask yourself, 100% of what?

具有height: 100%的元素会从其父级中拾取100％的元素，但要使其正常工作，父级也需要一个高度，而您的card没有该高度，因此100%会解析为auto.

An element having height: 100% picks up those 100% from its parent, but for that to work, also the parent need a height, which your card doesn't have, hence the 100% will resolve to auto.

由于wrapper将被解析为auto，因此.card-block也将被解析，因为其父级(wrapper)也没有定义的高度. (在Chrome浏览器中似乎有所表现，以为这不能在跨浏览器中使用.)

And since wrapper will be resolved auto, so will also the .card-block, as its parent (the wrapper) doesn't have a defined height either. (It appears to somewhat behave in Chrome, thought this won't work cross browsers.)

解决方案是完全使用Flexbox.

The solution is to use Flexbox all the way.

堆栈片段

const expandButtons = document.querySelectorAll('.expand');

for (let i = 0; i < expandButtons.length; i++) {
  const button = expandButtons[i];
  button.addEventListener("click", () => toggleExpand(button));
}

function toggleExpand(el) {
  const content = el.parentElement.querySelector('.content');
  content.classList.toggle('is-expanded');
}

.row {
  display: flex;
}

.col {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.wrapper {
  /*height: 100%;                removed  */
  flex: 1;                   /*  added, fill parent height  */
  display: flex;             /*  added  */
  /*align-items: stretch         this is the default and make its item,
                                 the "card-block", fill its parent height  */
}

.card-block {
  /*height: 100%;                removed  */
  display: flex;
  flex-direction: column;
}

.content {
  max-height: 0;
  overflow: auto;
  transition: max-height 500ms;
}

.content.is-expanded {
  max-height: 6em;
}

.spacer {
  display: flex;
  flex-grow: 1;
}

<div class="row">
  <div class="col">
    <div class="card">
      <div class="wrapper">
        <div class="card-block">
          <p>ASDF</p>
          <div class="content">
            <p>First</p>
            <p>Second</p>
            <p>Third</p>
          </div>
          <div class="spacer"></div>
          <button type="button" class="expand">Expand</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <div class="wrapper">
        <div class="card-block">
          <div class="content">
            <p>First</p>
            <p>Second</p>
          </div>
          <div class="spacer"></div>
          <button type="button" class="expand">Expand</button>
        </div>
      </div>
    </div>
  </div>
</div>

这篇关于可扩展盒不断增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！