adjust a div's height based on another div by CSS

Question

I have two DIVs (one is a sidebar and the other one is a content part) that I need to have the same height but I have a problem. The sidebar includes some lis. I want the height of the sidebar to be the same as the content part but when I use flex, the height of the sidebar can be longer than the content part (because both parts are dynamic). So I need the sidebar to be scrolled when the height is longer than the content part.

<section class="container">
    <div class="sidebar">
        <ul>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
        </ul>
    </div>
    <div class="content"></div>
</section>

My CSS code:

.container {
    display: flex;
}
.sidebar,.content {
    flex: 1 0 auto;
}

I even used JQuery but we see the wrong height because images are being loaded slowly in the content part.

My JQuery code:

jQuery(document).ready(function($) {

    $(".sidebar").height($(".content").height());

});

I even used the following code but nothing happens:

jQuery( window ).load(function($) {

    $(".sidebar").height($(".content").height());

});

I do not want to use position:absolute because... You can see my page in this link: https://end-eng.com/landing-grammar/

Answer 1

as I told above, I wanted sidebar to be scrolled when the sidebar is longer than content. so I solved it by pure CSS:
my new HTML code:

<section class="container">
    <div class="sidebar">
        <div class="sidebardiv">
            <ul>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
                <li><li>
            </ul>
        </div>
    </div>
    <div class="content"></div>
</section>

my new CSS code:

.container {
    display: flex;
}
.sidebar , .content {
    flex: 1 0 auto;
}
.sidebardiv {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    overflow: auto;
    padding: 0 8px 0 8px;
}

Answer 2

Here is your code it's very simple way to achieve sidebar and main content using flexbox; Codepen example goes here

Html goes here...

<section class="container">
    <div class="sidebar">
        <ul>
           <li>list item</li>
           <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ul>
    </div>
    <div class="content">content goes here...</div>
</section>

css goes here

body{
  margin:0px;
  padding:0px;
}
.container{
  display:flex;
}
.sidebar{
  height:100vh;
  width:200px;
  background:#ccc;
  overflow:auto; // overflow:auto; will scroll when your content reach 100vh height
}

Answer 3

What you have is very close! If you instead set the flex properties on the parent, you will have two equal-height divs. I added some colours to illustrate:

.container {
    display: flex;
    flex: 1 0 auto;
}
.sidebar {
    background: red;
}

.content {
  background: lime;
}

<section class="container">
    <div class="sidebar">
        <ul>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
        </ul>
    </div>
    <div class="content">hello content</div>
</section>

Here's some reading on the flex shorthand you're using: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

If you need the sidebar to be scrolled when the height is longer than the content, then you can use jQuery to match the elements' heights on a resize event (to keep it consistent) like so:

$(document).ready(function() {
  var a = '.content';
  var b = '.sidebar'
  matchHeight(a, b); // set at beginning
  $(window).resize(function() {
    matchHeight(a, b); // reset on window resize
  })
});

// set height of one element to another
// target: height to match
// el: element to match to target height
function matchHeight(target, el) {
  var targetHeight = $(target).height();
  $(el).css('height', targetHeight);
}

.container {
  display: flex;
  flex: 1 0 auto;
}

.sidebar {
  background: red;
  overflow-y: scroll;
  min-width: 50px;
}

.sub-container {
  background: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<section class="container">
  <div class="sidebar">
    <ul>
      <li>
        <li>
          <li>
            <li>
              <li>
                <li>
                  <li>
                    <li>
                      <li>
                        <li>
    </ul>
  </div>
  <div class="sub-container">
    <div class="content">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
      one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
    </div>
  </div>
</section>