css flex div 高度问题 - 为什么巨大 space？

Question

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

我想去掉文本下方的空白 space，我不希望文本下方有这么大的空隙，直到 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>

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

css flex div 高度问题 - 为什么巨大 space？

css flex div height issue - why the huge space?

html

css

flexbox

height