弹性盒问题

Question

So I have a question about flexbox. Basically, I'm creating a card component. I'd like the image on the left and the card body on the right. I have it.. Sort of.

The problem is the card is bigger than the image. I'd like the card to stay the height of the image.

Here is my code:

 .card-horizontal { display: flex; flex-direction: row; width: 100%; } .card-horizontal__image { width: 100%; max-width: 100%; background-position: center; } .card-horizonal__body{ display: flex; flex-direction: column; background: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); padding: 15px 20px; } 

 <div class='st-grid-12'> <div class='card-horizontal'> <div class='card-horizontal__imgage'> <img alt='' src='https://source.unsplash.com/random/400x400'> </div> <div class='card-horizonal__body'> <h2>This is a title</h2> <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p> <div class='btn btn--secondary'>Read More</div> </div> </div> </div> 

Answer 1

First, you had a typo in your class, And second you had a misuse of your display: flex

Here is your css now

  .card-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid red;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  .card-horizontal__imgage {
    max-width: 100%;
    background-position: center;  
    display: flex;  
  }

  .card-horizonal__body {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 15px 20px;
  }

I'm sure you can tell why I did that border and commented the shadow. To show you they're truly equal in size.

here is the code working

  .card-horizontal { display: flex; flex-direction: row; width: 100%; border: 1px solid red; } .card-horizontal__imgage { max-width: 100%; background-position: center; display: flex; } .card-horizonal__body { display: flex; flex-direction: column; background: white; /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */ padding: 15px 20px; } 

 <div class='st-grid-12'> <div class='card-horizontal'> <div class='card-horizontal__imgage'> <img alt='' src='https://source.unsplash.com/random/400x400'> </div> <div class='card-horizonal__body'> <h2>This is a title</h2> <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p> <div class='btn btn--secondary'>Read More</div> </div> </div> </div> 

EDIT

To ease the worries about the shadow, I added the shadow to the entire card, which is how it should be done anyway. You can't count the shadow as height. Shadows are CSS embellishments, like an outline for example. It doesn't add size to the item even if it appears that way....Checking the browser dev tool will answer some of these questions.

Answer 2

First, as I mentioned in the comments, in your HTML, you have a typo on the class='card-horizontal__imgage' code.

The issue is that the height of the overall card is causing the image div to stretch to be taller than the image by 4 pixels. Setting a height on the card itself solves the problem.

You have background-position: center; in your CSS, but that does nothing if the element you apply it to doesn't have a background. Another way to solve the issue (and that's what I'm showing below) is to not use an image element at all and just set the image as the background-image for the div element that is supposed to hold it.

Also, applying the box-shadow to the entire card, instead of just the text area on the right, makes for a better looking result. Remember, the shadow is applied outside of the element's height.

 .card-horizontal { display: flex; width: 100%; height:25%; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .card-horizontal__image { width: 100%; max-width: 100%; background-image:url("https://source.unsplash.com/random/400x400"); background-size:cover; } .card-horizonal__body{ background: white; padding:15px 20px; } 

 <div class='st-grid-12'> <div class='card-horizontal'> <div class='card-horizontal__image'></div> <div class='card-horizonal__body'> <h2>This is a title</h2> <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p> <div class='btn btn--secondary'>Read More</div> </div> </div> </div> 

Answer 3

When I look, the card is only slightly larger than the image. This seems to be due to the extra space that images have below them by default, as they are display:inline;

To remove this small space, and make the image column the same height as your card, make the image element display:block;

.card-horizontal__imgage img {
    display: block;
}