0

EDIT: Ive changed the wording of my question since my question is not the same as the answer in another question linked to above.

I have a two column, multiple row flex layout, each row has two <div class="flex-grid"> .. </div> elements.

I want to lose the empty space below the text, I don't want to specify a height as a fixed height will be either too small or big depending on a users browser screen width.

I just want say a padding of 20px below the text, I dont want this huge gap below the text until the div ends and the the next row begins.

How can I do this without setting a fixed height.

enter image description here

P.S. when I run this code in stackexchanges "run code snippet, it actually gives me the result I want! this is not however how it appears if saved as and html file and opened in Chrome.

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;
}
<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>
skomisa
  • 16,436
  • 7
  • 61
  • 102
Runner Bean
  • 4,895
  • 12
  • 40
  • 60
  • created a code snippet based on the code you have provided. can you please tell how you want the div display – Xenio Gracias May 02 '19 at 13:13
  • If you want objects of varying size to occupy the rows/columns independently, have you considered using css grid? – Christopher Bennett May 02 '19 at 13:20
  • @ChristopherBennett sorry, no not varying sizes across rows, each of the two elements in the row must be the same height, but just not so tall like they are now, just tall enough to fit the contents – Runner Bean May 02 '19 at 13:28
  • @XenioGracias, I just dont want the divs so huge in height, theres like a tiny bit of text in them and then this huge white space below, just want the divs to fit the contents, but as the browser windo is resized the flex div will resize in width and so must also resize in height but only to fit the contents – Runner Bean May 02 '19 at 13:30
  • the closest you look for would be column CSS (flex does not & grid requires to set spanning) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts - https://css-tricks.com/almanac/properties/c/columns/ - https://developer.mozilla.org/en-US/docs/Web/CSS/columns – G-Cyrillus May 02 '19 at 13:35

0 Answers0