Html Question posted in
Some basic documentation can be found here.

Html – How to ensure that two divs remain the same height using CSS?

I’m working on a project and I’m having some issues. Here’s a quick explanation:

I have 3 divs: "feed-container" (FC), "feed-post"(FP) and "comments-section"(CS). The last 2 are contained inside the first one. My goal is to have FP and CS next to each other, separated by a small gap and that both are the same height (taking the height of FP as the max height). I’ll link a screenshot of where I’m at for now Screenshot of the page. Don’t mind the colours, they’re here for me to better visualize my containers haha. So from the image, my tallest div is CS. It’s basically a div that stretches as more content is added to it via a form. The FP div is a fixed height that is defined by the size of the picture inside of it. I need CS to have a max height that is equal to the height of FP and any content that need to be added and that can’t fit should be accessible via a scrollbar on the div.

Here is the CSS of my 3 containers:

.feed-container {
    background-color: pink;
    display: flex;
    justify-content: space-between;
}

.feed-post {
    background-color: orange;
    min-width: 49%;
    margin-right: 1em;
}

.comments-section {
    background-color:mediumslateblue;
    min-width: 49%;
    max-width: 49%;
    overflow-y: auto;
}

I’m unsure about what to add/remove in order for the last container to match the height of the second one. If anyone can help, I’ll gladly listen !

I’ve tried asking GPT about it and he gave me a bunch of stuff to try. The most relevant one I think seems to be adding "max-height: 100%" to CS alongside "max-height: max-content;" for FP. Sadly, it didn’t fix my issue.

.feed-container {
    background-color: pink;
    display: flex;
    justify-content: space-between;
}

.feed-post {
    background-color: orange;
    min-width: 49%;
    margin-right: 1em;
    max-height: max-content;
}

.comments-section {
    background-color:mediumslateblue;
    min-width: 49%;
    max-width: 49%;
    overflow-y: auto;
    max-height: 100%;
}
Tags:

2

Answers


  1. 0

    You can solve this by using two different CSS properties: FlexBox or Grids.

    Here you have an example: https://codepen.io/faridsilva/pen/wvVEwJJ

    Using Flexbox:

    <section class="feed-container">
   <div class="feed-post">
      This is the feed post
   </div>
   <div class="comments-section">
      This is the comments section
   </div>
</section>

.feed-container {
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 2%;
}

.feed-post {
  background-color: orange;
  text-align: center;
  padding: 20px 0;
  flex-shrink: 1; // column can shrink at same speed
  width: 100%;
  max-width: 49%; // limit to maker room for 2 columns
}

.comments-section {
  background-color: mediumslateblue;
  overflow-y: auto;
  padding: 20px 0;
  text-align: center;
  flex-shrink: 1;// column can shrink at same speed
  width: 100%;
  max-width: 49%;// limit to maker room for 2 columns
}

    Using CSS Grid

    <div class="container">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns at 50% each */
  gap: 20px; /* Adjust the gap size as needed */
  width: 100%;
}

.item {
  background-color: lightgrey; /* Example styling for items */
  padding: 20px;
  text-align: center;
}
    Login or Signup to reply.
  2. 0

    The easiest way is to use an inner and outer container for the comment section. You need to give the outer container position: relative and the inner container position: absolute; inset: 0; and add an overflow rule such as overflow-y: auto;. That way the height of the comment section will also size to the post section no matter if the comment sections content is higher then the post section:

    .feed-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  > div {
    border: 2px solid red;
    &.comment-section-outer {
      position: relative;
      .comment-section-inner {
        position: absolute;
        inset: 0;
        overflow-y: auto;
      }
    }
  }
}
    <div class="feed-container">
  <div class="feed-post">
    Post section
    <br>more content
  </div>
  <div class="comment-section-outer">
    <div class="comment-section-inner">
      Comment Section
      <br>more content
      <br>more content
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search