Looking to ensure that a div with no content adjusts to the height of the neighboring div?

Question

Looking to ensure that a div with no content adjusts to the height of the neighboring div?

Currently working on a Reactjs project. I'm trying to set the height of the colorTab div to match that of the content div, while making it responsive. The height of content should adapt dynamically based on the text content in title and description, which can vary in length, as well as the width of the window.

However, when I remove the min-height property from the CSS of colorTab and only use height: 100%;, the colorTab disappears. Adding back the min-height makes it visible again but doesn't adjust to the height of content, which is the main objective here. How can I solve this issue?

JSX:

<div className="wrapper">
  <div className="colorTab" style={color}>

  </div>
  <div className="content">
    <tr>
      <td className="title">
        <a href={link}>{title}</a>
      </td>
    </tr>
    <tr>
      <td className="description">
        {description}
      </td>
    </tr>
  </div>
</div>

CSS:

.wrapper {
  min-height: 48px;
  overflow: hidden;
}

.colorTab {
  float: left;
  position: relative;
  width: 5px;
  min-height: 48px;
  height: 100%;
  border-radius: 5px;
  margin-left: 15px;
}

.title {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.description {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html css reactjs jsx web-frontend

Answer 1

Answer №1

Utilizing Flexbox can provide the necessary functionality.

Add display: flex to your container class and flex: 1 to your content div. This will ensure that regardless of the amount of content in the content div, the colorTab div will match its height.

Here is an example using pure HTML/CSS (no React):

.wrapper {
  overflow: hidden;
  display: flex;
}

.colorTab {
  position: relative;
  width: 5px;
  border-radius: 5px;
  background: red;
}

.content {
  flex: 1;
}

<div class="wrapper">
  <div class="colorTab">
  
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

Answer 2

Utilizing Flexbox can provide the necessary functionality.

Add display: flex to your container class and flex: 1 to your content div. This will ensure that regardless of the amount of content in the content div, the colorTab div will match its height.

Here is an example using pure HTML/CSS (no React):

.wrapper {
  overflow: hidden;
  display: flex;
}

.colorTab {
  position: relative;
  width: 5px;
  border-radius: 5px;
  background: red;
}

.content {
  flex: 1;
}

<div class="wrapper">
  <div class="colorTab">
  
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

Answer 3

Answer №2

If you're considering using the flexbox as suggested in a previous answer, there's still a catch...

For those stubborn old browsers that refuse to support modern techniques (yes, looking at you, grandpa with your ancient IE), it might be wise to offer additional fallback options.

Therefore, for the sake of completeness: You can also resort to utilizing the trusty old tables.

.wrapper {
  display: table;
}

.description {
  display: table-cell;
}

.colorTab {
  display: table-cell;
  width: 5px;
  border-radius: 5px;
  background: red;
}

// optional, but for aesthetic purposes
.content {
  position: relative;
  left: 10px;
}

<div class="wrapper">
  <div class="colorTab">
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

Answer 4

If you're considering using the flexbox as suggested in a previous answer, there's still a catch...

For those stubborn old browsers that refuse to support modern techniques (yes, looking at you, grandpa with your ancient IE), it might be wise to offer additional fallback options.

Therefore, for the sake of completeness: You can also resort to utilizing the trusty old tables.

.wrapper {
  display: table;
}

.description {
  display: table-cell;
}

.colorTab {
  display: table-cell;
  width: 5px;
  border-radius: 5px;
  background: red;
}

// optional, but for aesthetic purposes
.content {
  position: relative;
  left: 10px;
}

<div class="wrapper">
  <div class="colorTab">
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

Looking to ensure that a div with no content adjusts to the height of the neighboring div?

Answer №1

Answer №2

Similar questions

Tips on attaching a class to elements in a loop when a click event occurs

Blending an HTML jQuery toggle

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Drawing intersecting lines on a javascript canvas and clearing them using the lineto method

The CSS styling is not applying correctly to a particular page

Sorting in reverse order within a table

Using the CSS :not selector to style certain input elements

Adjust the properties within the component's styles using Angular 2

How can I alter the color of the top bar in Foundation framework?

Grab the content from a contenteditable HTML Element using React

What is the best way to rearrange the order of divs when the screen is being resized?

What is the best way to incorporate both images and text in PHP code?

A step-by-step guide on dividing items in an array with React

Is there a way to use CSS animation and transform to create a flip effect on two different divs, flipping them up and then back down with pauses and looping in between?

Issues with Google maps are causing multiple maps to malfunction

Customizing hover color with tailwind CSS

List items that are not in any particular order spilling over onto the next

The Asp.net MVC Navigation Bar

The potential for an 'undefined' object in TypeScript React is a concern that should be addressed

The MUI text input element fails to correctly update the component's state