'Scale down Image to fit Flex "sibling" [duplicate]

I'm pretty new to CSS and I'm trying to build a Card-Component.

My problem is that the div with the text always adjusts to the height of the image and not the other way around. My goal is to have the image scale down in height so that it is exactly as high as the text-divs minimal height.

The Text-Content will be dynamic, so the height of the text-box will vary

current state: Image

Planned result: Image

Here's my current code: 

* {
  box-sizing: border-box;
}

.wrapper {
  /* width: 768px; */
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  width: 50%;
  max-width: 50%;
  margin: 10px;
}

.card {
  padding: 50px;
  background: green;
}
img {
  width: 100%;
  object-fit: fill;
}
<section>
  <div class="wrapper">
  <div class="flex">
    <div class="flex-item card">
      <p>Some example Text</p>
    </div>
    <div class="flex-item image">
      <img src="https://dummyimage.com/600x400/000000/fff.png" />
    </div>
  </div>
  </div>
</section>

JSFiddle code

Any guidance is much appreciated!

cssflexbox


Solution 1:[1]

Specify a height on your flex-item then use height: inherit on your image. I used the height that the card was rendering at to demonstrate.

* {
  box-sizing: border-box;
}

.wrapper {
  /* width: 768px; */
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 100vh;
}

.flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  width: 50%;
  max-width: 50%;
  margin: 10px;
  height: 155px;
}

.card {
  padding: 50px;
  background: green;
}

img {
  width: 100%;
  object-fit: fill;
  height: inherit;
}
<section>
  <div class="wrapper">
    <div class="flex">
      <div class="flex-item card">
        <p>Some example Text</p>
      </div>
      <div class="flex-item image">
        <img src="https://dummyimage.com/600x400/000000/fff.png" />
      </div>
    </div>
  </div>
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron

Related Questions