css flex div高度问题-为什么空间很大？答案

【问题标题】：css flex div height issue - why the huge space?css flex div高度问题-为什么空间很大？
【发布时间】：2019-09-22 01:29:33
【问题描述】：

我有一个两列多行的弹性布局

我想丢失文本下方的空白空间，我不希望文本下方有这么大的空白，直到 div 结束并且下一行开始。

如何在不设置固定高度的情况下做到这一点？

（最好通过这张图片来解释）

.col-xs,
.col-sm {
  position: relative;
}

.col-sm {
  float: left;
}

.col-sm {
  width: 91.66667%;
}

.flex-grid-component {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-grid-component .flex-grid {
  box-sizing: border-box;
  flex: 0 1 auto;
  display: flex;
  border: 0 solid transparent;
  flex-basis: 50%;
  max-width: 50%;
  border-width: 1.5vw;
}

.property-item-container {
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  position: relative;
}

.property-item-container .property-details {
  display: flex;
}

<html>

<head>

</head>

<body>

  <div class="col-xs col-sm">
    <div class="flex-grid-component">

      <div class="flex-grid">
        <div class="property-item-container">
          <div class="property-details">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a malesuada lorem, ut gravida metus. Cras elementum vitae mi a ornare. Curabitur eget congue diam, at dictum ante.
            </div>
          </div>
        </div>
      </div>
      <div class="flex-grid">
        <div class="property-item-container">
          <div class="property-details">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a malesuada lorem, ut gravida metus. Cras elementum vitae mi a ornare. Curabitur eget congue diam, at dictum ante.
            </div>
          </div>
        </div>
      </div>
      <div class="flex-grid">
        <div class="property-item-container">
          <div class="property-details">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a malesuada lorem, ut gravida metus. Cras elementum vitae mi a ornare. Curabitur eget congue diam, at dictum ante.
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

【问题讨论】：

看起来某处有一个height: 100%。尝试将height: auto 添加到弹性容器中。
或者将align-content: flex-start添加到flex父级。包裹 flex 子项的高度在父项高度之间共享，因为 align-content 默认为 stretch。
如果你不能证明它，它没有发生。 minimal reproducible example 是必需的。
@Paulie_D 你什么意思？我包含了演示它的代码，我在 Chrome 浏览器中打开并演示了这个 html 代码，我什至在我的 Chrome 浏览器中包含了它的外观图像来演示它
@Michael_B 谢谢，这实际上解决了我完整代码中的问题

标签： html css flexbox height

【解决方案1】：

嘿，您需要从 .property-item-container 中删除 height: 100%; 。我已经在下面更正了。这不是特定于浏览器的问题。

  .col-xs,
.col-sm {
  position: relative;
}

.col-sm {
  float: left;
}

.col-sm {
  width: 91.66667%;
}

.flex-grid-component {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-grid-component .flex-grid {
  box-sizing: border-box;
  flex: 0 1 auto;
  display: flex;
  border: 0 solid transparent;
  flex-basis: 50%;
  max-width: 50%;
  border-width: 1.5vw;
}

.property-item-container {
  width: 100%;

  background-color: black;
  color: white;
  position: relative;
}

.property-item-container .property-details {
  display: flex;
}

<div class="col-xs col-sm">
    <div class="flex-grid-component">

      <div class="flex-grid">
        <div class="property-item-container">
          <div class="property-details">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a malesuada lorem, ut gravida metus. Cras elementum vitae mi a ornare. Curabitur eget congue diam, at dictum ante.
            </div>
          </div>
        </div>
      </div>
      <div class="flex-grid">
        <div class="property-item-container">
          <div class="property-details">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a malesuada lorem, ut gravida metus. Cras elementum vitae mi a ornare. Curabitur eget congue diam, at dictum ante.
            </div>
          </div>
        </div>
      </div>
      <div class="flex-grid">
        <div class="property-item-container">
          <div class="property-details">
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a malesuada lorem, ut gravida metus. Cras elementum vitae mi a ornare. Curabitur eget congue diam, at dictum ante.
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

【讨论】：

不，在提供的示例中不是这样。在您的示例中恢复height: 100%;，您会发现它仍然有效。
听着你没有在父母中提供任何高度，这就是为什么它在浏览器中占用了这么多高度。
首先，我不是问的人，其次，如果没有给出高度，flex row items 会折叠到它们的内容，所以当说这是原因时，你需要阅读 Flexbox 的工作原理。