2

I have two divs that display vertically on top of each other. Both divs expand 100% width. I am searching for a way for the height of the bottom div to be determined by the content that exists inside of it, and the height of the top div to dynamically resize itself so that its height is the same height as the bottom div.

The top div has a small amount of text and the bottom div has a large amount of text. Obviously, as the screen size shrinks and the text wraps the divs become longer. For example, as the screen size shrinks and the bottom div with a significant amount of text becomes longer than the top div, the top div should increase in size.

I know that something like this could be accomplished with javascript by dynamically setting the height of the divs through an event listener or something similar, but I am searching for a way that could be accomplished with html and css.

I have tried flex grow and experimenting with a percentage based height and neither have been effective. I would greatly appreciate any insight anyone might have!

.container {
  display: flex;
  flex-direction: column;
}

.b1 {
  background-color: red;
  height: 50%;
}

.b2 {
  background-color: orange;
  height: 50%;
}

.box {
  flex-grow: 1;
}
<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Dog
  • 2,726
  • 7
  • 29
  • 66
  • 1
    I don't think that's possible with css. :( – Sebi Apr 06 '23 at 02:03
  • :( that's disappointing. i was hoping there might be some obscure way with tables, grid, or flex. – Dog Apr 06 '23 at 02:05
  • There is no way to basically 'listen' to the size of another sibling element. At least not that I know of. – Sebi Apr 06 '23 at 02:09
  • In flexbox, the flexible sizing properties (e.g. `flex-grow`, `justify-content`, `align-items`) work by distributing free space. As there is no free space in your layout, these properties have no effect. You would need to define a height that exceeds the content height—which would create extra space—for these properties to work. So flexbox is not an option in this instance. – Michael Benjamin Apr 07 '23 at 02:04
  • CSS Grid, however, can handle the job. By setting the row heights to `1fr`, each row will be the height of the tallest row. Full explanation in the duplicate. [revised code](https://jsfiddle.net/ozhtL2p8/) – Michael Benjamin Apr 07 '23 at 02:05

1 Answers1

1

Here is CSS only Example: Answer Help By: Michael Benjamin

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 25px;
}


.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 25px;
}

.b1 {
  background-color: red;
}

.b2 {
  background-color: orange;
}

body {
  margin: 0
}
<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

And is a Javascript snippet that works to achieve the results you would like:

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');

function setHeight() {
  const b2Height = b2.offsetHeight;
  b1.style.height = `${b2Height}px`;
}

window.addEventListener('resize', setHeight);
setHeight();

Live Demo:

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');

function setHeight() {
  const b2Height = b2.offsetHeight;
  b1.style.height = `${b2Height}px`;
}

window.addEventListener('resize', setHeight);
setHeight();
.container {
    display: flex;
    flex-direction: column;
  }

  .b1 {
    background-color: red;
    height: 50%;
  }

  .b2 {
    background-color: orange;
    height: 50%;
  }

  .box {
    flex-grow: 1;
  }
<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>
Michael Rogers
  • 190
  • 1
  • 11