div height:auto仅适配首个容器，后续容器高度异常问题求助

I get exactly what's going on here—your flex container is forcing all child items to match the height of the tallest one, which is why only the first portrait image's container behaves like it should. Let's break down the problem and fix it step by step.

The Root Cause #

Your .picture-holder uses display: flex, and flexbox defaults to align-items: stretch. This means every .picture-single child gets stretched vertically to match the height of the tallest container in the row. That's why your landscape image containers are stuck at the height of the first portrait one instead of adapting to their own content.

Solution Steps #

Here's how to tweak your CSS to make each container automatically fit its image's height:

1. Stop forced height stretching on the flex holder
   Adjust the align-items property of .picture-holder to flex-start (or center if you prefer vertical centering). This lets each child container take only the height it needs.

2. Make images scale proportionally
   Add styles directly to the images to ensure they resize correctly without overflowing or distorting their containers.

Modified CSS Code #

.picture-holder{ 
  width: auto; 
  height: auto; 
  border: solid black; 
  border-radius: 35px; 
  background-color: white; 
  margin: 60px 40px 0px 40px; 
  display: flex; 
  align-items: flex-start; /* Prevents vertical stretching of child items */
  gap: 10px; /* Optional: Cleaner spacing between items instead of margin on .picture-single */
} 

.picture-single{ 
  width: auto; 
  height: auto; 
  /* Remove margin-left/right if using gap above */
} 

.picture-title{ 
  text-align: center; 
  font-size: 1.5em; 
} 

.entry-image{ 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
  padding-bottom: 10px; 
} 

/* Ensure images resize correctly while maintaining aspect ratio */
.entry-image img {
  max-width: 100%;
  height: auto;
}

.picture-details{ 
  margin: 0px 30px 0px 20px; 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  font-size: 0.8em; 
  text-align: center; 
}

Quick Explanation #

• align-items: flex-start tells the flex container to align items to the top of the row, so each .picture-single only uses the height required for its image and text.
• The entry-image img rule ensures both portrait and landscape images scale to fit their container without breaking their aspect ratio—no more overflow or squished images.
• The optional gap property on .picture-holder is a cleaner alternative to adding margins to each .picture-single for spacing between items.

Optional Tweak #

If you'd prefer your containers to be vertically centered in the row instead of top-aligned, just swap align-items: flex-start with align-items: center in the .picture-holder styles.

内容的提问来源于stack exchange，提问作者john seymour