css flex div высота вопроса - почему огромное пространство? - PullRequest
Новая
       7

css flex div высота вопроса - почему огромное пространство?

0 голосов
/ 03 мая 2019

У меня есть два столбца, многострочный гибкий макет

Я хочу потерять пустое пространство под текстом, я не хочу, чтобы этот огромный пробел под текстом до конца div и до начала следующей строки.

Как я могу сделать это, не устанавливая фиксированную высоту?

(лучше всего объясняется с помощью этого изображения)

enter image description here

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

1 Ответ

0 голосов
/ 03 мая 2019

эй, вам нужно удалить height: 100%; из .property-item-container. Я уже исправляю это ниже. Это не проблема браузера. 

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