How can I make a div element match the height of an image and overflow without relying on

Question

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq

Additionally, you can find a gist of the code snippet below:

<div class="parent">
 <div class="imageWrapper">
  <img class="image" src="imageurl" />
  </div>
  <div class="textWrapper">
   ...lots of text
  </div>
</div>

The parent container utilizes flexbox and has two children - imageWrapper and textWrapper. Is there a way to make the textWrapper div match the height of the image when scrolling, in case the content exceeds the height (without relying on javascript)?

Expected output screenshot: https://i.sstatic.net/xgDmo.png

Actual output screenshot: https://i.sstatic.net/IBFE4.png

javascript html css

Answer 1

Answer №1

To start, apply .parent with display: flex to ensure equal height columns.

Next, for the column inside .textWrapper, add

overflow: auto; position: relative

.

Include a child element .inner-text with position: absolute;.

.parent {
    display: flex;
}

.textWrapper {
    position: relative;
    overflow: auto;
}

.textWrapper .inner-text{
    position: absolute;
}

Here is a complete example:

.parent {
    width: 620px;
    display: flex;
}

.imageWrapper {
    width: 100%;
    flex: 1;
}

.image {
    width: 100%;
    display: block;
    background: linear-gradient(red, yellow, green);
    height: 205px;
}

.textWrapper {
    flex: 1;
    background: purple;
    color: white;
    position: relative;
    overflow: auto;
}

.inner-text {
    position: absolute;
}

<div class="parent">
    <div class="imageWrapper">
        <img class="image" />
    </div>
    <div class="textWrapper">
        <div class="inner-text">
            The inner text here...
        </div>
    </div>
</div>

Answer 2

To start, apply .parent with display: flex to ensure equal height columns.

Next, for the column inside .textWrapper, add

overflow: auto; position: relative

.

Include a child element .inner-text with position: absolute;.

.parent {
    display: flex;
}

.textWrapper {
    position: relative;
    overflow: auto;
}

.textWrapper .inner-text{
    position: absolute;
}

Here is a complete example:

.parent {
    width: 620px;
    display: flex;
}

.imageWrapper {
    width: 100%;
    flex: 1;
}

.image {
    width: 100%;
    display: block;
    background: linear-gradient(red, yellow, green);
    height: 205px;
}

.textWrapper {
    flex: 1;
    background: purple;
    color: white;
    position: relative;
    overflow: auto;
}

.inner-text {
    position: absolute;
}

<div class="parent">
    <div class="imageWrapper">
        <img class="image" />
    </div>
    <div class="textWrapper">
        <div class="inner-text">
            The inner text here...
        </div>
    </div>
</div>

Answer 3

Answer №2

For optimal layout control, consider using grid to evenly separate elements of the same size within a parent container that adjusts based on their dimensions. You can then apply overflow: scroll to one child while leaving the other unaffected, allowing the parent to adjust only to the image.

.parent {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

img {
   width: 100%;
}

.text-wrapper {
   overflow: scroll;
}

If you need to crop images to a consistent size regardless of their original dimensions, use this CSS style:

img {
   object-fit: cover;
   object-position: 50% 50%;
}

Adjust the parent container's size accordingly:

.parent {
   height: 600px;
}

Answer 4

For optimal layout control, consider using grid to evenly separate elements of the same size within a parent container that adjusts based on their dimensions. You can then apply overflow: scroll to one child while leaving the other unaffected, allowing the parent to adjust only to the image.

.parent {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

img {
   width: 100%;
}

.text-wrapper {
   overflow: scroll;
}

If you need to crop images to a consistent size regardless of their original dimensions, use this CSS style:

img {
   object-fit: cover;
   object-position: 50% 50%;
}

Adjust the parent container's size accordingly:

.parent {
   height: 600px;
}

Answer 5

Answer №3

It seems that achieving the desired outcome with solely CSS is not feasible. Asynchronous loading of elements on a webpage typically results in images being loaded after text, making it challenging to control the height of a div based on an image load event.

To address this issue, one possible workaround involves using background-image for the div and setting a fixed height for the text content.

.parent {
  position:relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height:100vh;
}

.image {
  border:1px solid purple;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}
.textWrapper {
  height:300px;
  max-height:100vh;
  overflow: auto;
  background-color:purple;
  color:white;
}

https://codepen.io/kriskys/pen/bGbpGqm

Another approach is to adjust the text size dynamically when the image has finished loading using JavaScript:

     $('img').on('load',function(){
       // Create dummy image to get real size
       $("<img>").attr("src", $(img).attr("src")).load(function(){
         var realWidth = this.width;
         var realHeight = this.height;
         $('textWrapper').style({'height':realHeight});
       });
     });

Answer 6

It seems that achieving the desired outcome with solely CSS is not feasible. Asynchronous loading of elements on a webpage typically results in images being loaded after text, making it challenging to control the height of a div based on an image load event.

To address this issue, one possible workaround involves using background-image for the div and setting a fixed height for the text content.

.parent {
  position:relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height:100vh;
}

.image {
  border:1px solid purple;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}
.textWrapper {
  height:300px;
  max-height:100vh;
  overflow: auto;
  background-color:purple;
  color:white;
}

https://codepen.io/kriskys/pen/bGbpGqm

Another approach is to adjust the text size dynamically when the image has finished loading using JavaScript:

     $('img').on('load',function(){
       // Create dummy image to get real size
       $("<img>").attr("src", $(img).attr("src")).load(function(){
         var realWidth = this.width;
         var realHeight = this.height;
         $('textWrapper').style({'height':realHeight});
       });
     });

How can I make a div element match the height of an image and overflow without relying on

Answer №1

Answer №2

Answer №3

Similar questions

Resetting several sticky titles after displaying and hiding elements

Retrieving the value of an array from a JSON data structure

An error occurred while trying to access properties of null during a promise, specifically when trying to read the 'parentNode' property - triggered by calling router.push({})

What sets the target property of the mousewheel event apart from other events like click, mousedown, and touchstart?

Issues persist with $.getJSON

Applying CSS classes to my div element

Is it possible for a JSON array to consist of objects with varying key/value pairs?

"Embrace the power of Ajax and JSON with no regrets

Accessing JSON data from the Public folder in a create-react-app

How many addresses are stored in the JSON file?

Using AJAX, FLASK, and JavaScript to send an existing array to an endpoint

What is the most effective method to convert PHP data into JSON and present it in the jQuery success scenario?

Vue.js: Utilizing async/await in Vue.js results in an observer being returned

Imitation of three-dimensional camera rotation

AngularJS fails to fetch data from API queries

`CSS alignment problems with multiple images`

How to Properly Adjust the Material UI CircularProgress Size

JavaScript - Issue with For Loop when Finding Symmetric Difference

Maintaining the position of the screen as you type in information that is located outside of the container

JQuery will only run after the Alert has been triggered in Firefox