How do I remove margin between flex children?

In the snippet below, I am trying to create a grid of records each of which has an image, details (heading and sub-details) and a button.

For the grid holding these records (which are added dynamically), I have used CSS grid to create an auto-fill grid with column dimension boundaries, while for the individual record items, I have used a flexbox with the direction set to column to make sure flex children flow from top to bottom with space-between them.

The problem I am having is evident in the attached snippet when the amount content of the details in one record on a row is greater than the others, those others become pushed down.

What I want is for the details to stay flush against the bottom of the image while the button remains at the bottom.

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));

  grid-template-rows: auto;

  grid-auto-flow: dense;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-basis: 45%;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.5rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0.2rem;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: none;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 0.01rem solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

asked Jan 19 at 3:30

Oguntoye

10010

What is .record__image-holder's flex-basis for? If you remove it, the text will stay on top.

– Olafant
Jan 19 at 4:00

add a comment |

In the snippet below, I am trying to create a grid of records each of which has an image, details (heading and sub-details) and a button.

The problem I am having is evident in the attached snippet when the amount content of the details in one record on a row is greater than the others, those others become pushed down.

What I want is for the details to stay flush against the bottom of the image while the button remains at the bottom.

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));

  grid-template-rows: auto;

  grid-auto-flow: dense;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-basis: 45%;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.5rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0.2rem;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: none;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 0.01rem solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

asked Jan 19 at 3:30

Oguntoye

10010

What is .record__image-holder's flex-basis for? If you remove it, the text will stay on top.

– Olafant
Jan 19 at 4:00

add a comment |

In the snippet below, I am trying to create a grid of records each of which has an image, details (heading and sub-details) and a button.

The problem I am having is evident in the attached snippet when the amount content of the details in one record on a row is greater than the others, those others become pushed down.

What I want is for the details to stay flush against the bottom of the image while the button remains at the bottom.

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));

  grid-template-rows: auto;

  grid-auto-flow: dense;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-basis: 45%;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.5rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0.2rem;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: none;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 0.01rem solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

asked Jan 19 at 3:30

Oguntoye

10010

In the snippet below, I am trying to create a grid of records each of which has an image, details (heading and sub-details) and a button.

The problem I am having is evident in the attached snippet when the amount content of the details in one record on a row is greater than the others, those others become pushed down.

What I want is for the details to stay flush against the bottom of the image while the button remains at the bottom.

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));

  grid-template-rows: auto;

  grid-auto-flow: dense;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-basis: 45%;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.5rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0.2rem;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: none;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 0.01rem solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));

  grid-template-rows: auto;

  grid-auto-flow: dense;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-basis: 45%;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.5rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0.2rem;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: none;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 0.01rem solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));

  grid-template-rows: auto;

  grid-auto-flow: dense;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-basis: 45%;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.5rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0.2rem;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: none;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 0.01rem solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

html css flexbox css-grid

asked Jan 19 at 3:30

Oguntoye

10010

asked Jan 19 at 3:30

Oguntoye

10010

asked Jan 19 at 3:30

Oguntoye

10010

asked Jan 19 at 3:30

Oguntoye

10010

asked Jan 19 at 3:30

Oguntoye

10010

What is .record__image-holder's flex-basis for? If you remove it, the text will stay on top.

– Olafant
Jan 19 at 4:00

add a comment |

What is .record__image-holder's flex-basis for? If you remove it, the text will stay on top.

– Olafant
Jan 19 at 4:00

What is .record__image-holder's flex-basis for? If you remove it, the text will stay on top.

– Olafant
Jan 19 at 4:00

add a comment |

1 Answer
1

active

oldest

votes

You need to give the children that don't grow flex-grow:0; and the one that grows: flex-grow:1

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

Additional notes:

to prevent your buttons from reflowing content when hovered, their border-width in both states has to be equal (make them transparent in normal state).

it is almost never a good idea to provide a border-width value in anything else than px (and it should be an integer). Otherwise you'll see artifacts in browsers and your borders will flicker during animations, (not necessarily their animations).

if you place a positive fr value in the max value of your repeating grid-template-columns, your elements will be equally distributed.

edited Jan 19 at 4:07

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

I used rem units on the border-width because on the html rule, I explicitly set font-size: 10px, so I expect .1rem to be 1px. Will user stylesheets override the value I have set for font-size in the html selector?

– Oguntoye
Jan 19 at 8:17

2

@Oguntoye, Yes user stylesheets can set a new value of font-size on root element therefore changing rem value for the entire page (that's why we use rem in the first place). The question is: what do you want to happen to your border when rem value changes? Should your 1px border change width and risk getting blurry during page animations?

– Andrei Gheorghiu
Jan 19 at 18:39

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54263839%2fhow-do-i-remove-margin-between-flex-children%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need to give the children that don't grow flex-grow:0; and the one that grows: flex-grow:1

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

Additional notes:

to prevent your buttons from reflowing content when hovered, their border-width in both states has to be equal (make them transparent in normal state).

it is almost never a good idea to provide a border-width value in anything else than px (and it should be an integer). Otherwise you'll see artifacts in browsers and your borders will flicker during animations, (not necessarily their animations).

if you place a positive fr value in the max value of your repeating grid-template-columns, your elements will be equally distributed.

edited Jan 19 at 4:07

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

I used rem units on the border-width because on the html rule, I explicitly set font-size: 10px, so I expect .1rem to be 1px. Will user stylesheets override the value I have set for font-size in the html selector?

– Oguntoye
Jan 19 at 8:17

2

@Oguntoye, Yes user stylesheets can set a new value of font-size on root element therefore changing rem value for the entire page (that's why we use rem in the first place). The question is: what do you want to happen to your border when rem value changes? Should your 1px border change width and risk getting blurry during page animations?

– Andrei Gheorghiu
Jan 19 at 18:39

add a comment |

You need to give the children that don't grow flex-grow:0; and the one that grows: flex-grow:1

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

Additional notes:

to prevent your buttons from reflowing content when hovered, their border-width in both states has to be equal (make them transparent in normal state).

it is almost never a good idea to provide a border-width value in anything else than px (and it should be an integer). Otherwise you'll see artifacts in browsers and your borders will flicker during animations, (not necessarily their animations).

if you place a positive fr value in the max value of your repeating grid-template-columns, your elements will be equally distributed.

edited Jan 19 at 4:07

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

I used rem units on the border-width because on the html rule, I explicitly set font-size: 10px, so I expect .1rem to be 1px. Will user stylesheets override the value I have set for font-size in the html selector?

– Oguntoye
Jan 19 at 8:17

2

@Oguntoye, Yes user stylesheets can set a new value of font-size on root element therefore changing rem value for the entire page (that's why we use rem in the first place). The question is: what do you want to happen to your border when rem value changes? Should your 1px border change width and risk getting blurry during page animations?

– Andrei Gheorghiu
Jan 19 at 18:39

add a comment |

You need to give the children that don't grow flex-grow:0; and the one that grows: flex-grow:1

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

Additional notes:

to prevent your buttons from reflowing content when hovered, their border-width in both states has to be equal (make them transparent in normal state).

it is almost never a good idea to provide a border-width value in anything else than px (and it should be an integer). Otherwise you'll see artifacts in browsers and your borders will flicker during animations, (not necessarily their animations).

if you place a positive fr value in the max value of your repeating grid-template-columns, your elements will be equally distributed.

edited Jan 19 at 4:07

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

You need to give the children that don't grow flex-grow:0; and the one that grows: flex-grow:1

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

Additional notes:

to prevent your buttons from reflowing content when hovered, their border-width in both states has to be equal (make them transparent in normal state).

it is almost never a good idea to provide a border-width value in anything else than px (and it should be an integer). Otherwise you'll see artifacts in browsers and your borders will flicker during animations, (not necessarily their animations).

if you place a positive fr value in the max value of your repeating grid-template-columns, your elements will be equally distributed.

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

.dashboard__main-content {

  padding: 1rem 0;

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

  grid-template-rows: auto;

  grid-auto-flow: dense;

  padding: 2rem;



}



.record {

  display: flex;

  flex-grow: 1;

  flex-flow: column nowrap;

  justify-content: space-between;

  border: 0.08rem solid #2a5583;

}



.record__image-holder {

  flex-grow: 0;

}

.record__image-holder img {

  display: block;

}



.record__image {

  object-fit: cover;

  width: 100%;

}



.record__details {

  padding: 0.7rem 0.5rem 0.5rem 0.5rem;

  margin-top: 0;

  margin-bottom: auto;

  overflow-wrap: break-word;

  word-wrap: break-word;

  word-break: break-word;

  flex-grow: 1;

  background-color: #fafafa;

  border-bottom: 1px solid #eee;

}



.record__title {

  margin: 0.2rem 0;

}



.record__more-btn {

  background: #2a5583;

  color: white;

  padding: 0.5rem 2rem;

  align-self: flex-end;

  border: 1px solid transparent;

  float: right;

  margin: 1rem;

}



.record__more-btn:hover,

.record__more-btn:focus {

  border: 1px solid #2a5583;

  outline: none;

  color: #2a5583;

  background: aliceblue;

  flex-grow: 0;

}

body {margin: 0;}

<section class="dashboard__main-content">

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Stacks of cash in rubber wads</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/1">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Sanother red-flag</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/2">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">need intervention</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/3">View More</button>

  </div>

  <div class="record record--intervention record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">intervention Skope 2</h4>

      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>

    </div>

    <button class="record__more-btn" record-path="interventions/4">View More</button>

  </div>

  <div class="record record--red-flag record--investigating">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">Another red-flag tester</h4>

      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw

        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/5">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">some</h4>

      <p class="record__comment">s...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/6">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/7">View More</button>

  </div>

  <div class="record record--red-flag record--draft">

    <div class="record__image-holder">

      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">

    </div>

    <div class="record__details">

      <h4 class="record__title">where the government</h4>

      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>

    </div>

    <button class="record__more-btn" record-path="red-flags/8">View More</button>

  </div>



</section>

edited Jan 19 at 4:07

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

edited Jan 19 at 4:07

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

answered Jan 19 at 3:40

Andrei Gheorghiu

34.7k74774

I used rem units on the border-width because on the html rule, I explicitly set font-size: 10px, so I expect .1rem to be 1px. Will user stylesheets override the value I have set for font-size in the html selector?

– Oguntoye
Jan 19 at 8:17

2

@Oguntoye, Yes user stylesheets can set a new value of font-size on root element therefore changing rem value for the entire page (that's why we use rem in the first place). The question is: what do you want to happen to your border when rem value changes? Should your 1px border change width and risk getting blurry during page animations?

– Andrei Gheorghiu
Jan 19 at 18:39

add a comment |

I used rem units on the border-width because on the html rule, I explicitly set font-size: 10px, so I expect .1rem to be 1px. Will user stylesheets override the value I have set for font-size in the html selector?

– Oguntoye
Jan 19 at 8:17

2

@Oguntoye, Yes user stylesheets can set a new value of font-size on root element therefore changing rem value for the entire page (that's why we use rem in the first place). The question is: what do you want to happen to your border when rem value changes? Should your 1px border change width and risk getting blurry during page animations?

– Andrei Gheorghiu
Jan 19 at 18:39

I used rem units on the border-width because on the html rule, I explicitly set font-size: 10px, so I expect .1rem to be 1px. Will user stylesheets override the value I have set for font-size in the html selector?

– Oguntoye
Jan 19 at 8:17

@Oguntoye, Yes user stylesheets can set a new value of font-size on root element therefore changing rem value for the entire page (that's why we use rem in the first place). The question is: what do you want to happen to your border when rem value changes? Should your 1px border change width and risk getting blurry during page animations?

– Andrei Gheorghiu
Jan 19 at 18:39

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku