CSS side by side both same height with flexbox

Question

I'm trying to get 2 divs side by side using flexbox, but the div with the text in it is taller than the image side and I can't figure out why.

.serviceEntry {
  display: flex;
  margin-bottom: 2rem;
}

.serviceImg,
.serviceContent {
  flex: 1;
}

.serviceContent {
  color: white;
  background-color: #93AEC2;
  padding: 0px 10px;
  line-height: 2;
}

<div class="serviceEntry">
  <div class="serviceImg">
    <img src="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg" class="attachment-large size-large" alt="" srcset="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg 1024w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-300x196.jpg 300w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-768x501.jpg 768w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1536x1001.jpg 1536w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37.jpg 2000w"
      sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="668">
  </div>
  <div class="serviceContent">
    <h3><a href="https://hope.rudtek.dev/services/women/">Women</a></h3>
    We provide specialized individual treatment and cognitive behavioral therapy to empower women in all aspects of life, including personal growth, overcoming mood and anxiety disorders, and navigating major life transitions.
  </div>
</div>

Here is my fiddle: https://jsfiddle.net/bu1q359z/

Always Helping · Accepted Answer · 2020-08-24T03:36:53.917

Use display:flex on .serviceImg as well to match text and image height (side by side)

Js Fiddle: https://jsfiddle.net/ou7ktr2e/

Live Demo: (Run snippet and click full page to see it working)

.serviceEntry {
  display: flex;
  margin-bottom: 2rem;
}

.serviceContent {
  flex: 1;
}

.serviceImg {
  display: flex;
  flex: 1;
}

.serviceContent {
  color: white;
  background-color: #93AEC2;
  padding: 0px 10px;
  line-height: 2;
}

<div class="serviceEntry">
  <div class="serviceImg">
    <img src="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg" class="attachment-large size-large" alt="" srcset="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg 1024w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-300x196.jpg 300w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-768x501.jpg 768w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1536x1001.jpg 1536w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37.jpg 2000w" sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="668">
  </div>
  <div class="serviceContent">
    <h3><a href="https://hope.rudtek.dev/services/women/">Women</a></h3>
    We provide specialized individual treatment and cognitive behavioral therapy to empower women in all aspects of life, including personal growth, overcoming mood and anxiety disorders, and navigating major life transitions.
  </div>
</div>

score 1 · Answer 2 · answered Aug 24 '20 at 03:39

1

Hi your div is actually fine and filling up the container. your problem is that your image is not filling up your div.

answered Aug 24 '20 at 03:39

Shawn

45
2

1

thanks for the help, but I don't see this as an answer. – rudtek Aug 24 '20 at 03:42

score 0 · Answer 3 · answered Aug 24 '20 at 03:34

In a flex container, an item cannot be smaller than its content along the main axis.

This means that the image is expanding its container (a flex item) to fit its natural size.

Override the min-width: auto default. Use min-width: 0.

Then limit the size of the image to fit inside its container.

.serviceEntry {
  display: flex;
  margin-bottom: 2rem;
  border: 1px solid red;
}

.serviceImg,
.serviceContent {
  min-width: 0;
  flex: 1;
}

.serviceContent {
  color: white;
  background-color: #93AEC2;
  padding: 0px 10px;
  line-height: 2;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

<div class="serviceEntry">
  <div class="serviceImg">
    <img src="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg" class="attachment-large size-large" alt="" srcset="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg 1024w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-300x196.jpg 300w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-768x501.jpg 768w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1536x1001.jpg 1536w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37.jpg 2000w"
      sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="668">
  </div>
  <div class="serviceContent">
    <h3><a href="https://hope.rudtek.dev/services/women/">Women</a></h3>
    We provide specialized individual treatment and cognitive behavioral therapy to empower women in all aspects of life, including personal growth, overcoming mood and anxiety disorders, and navigating major life transitions.
  </div>
</div>

More information: Why don't flex items shrink past content size?

revised fiddle

CSS side by side both same height with flexbox

3 Answers3