CODEWITHSUNDEEP
cssflexbox
silvenon
silvenon

Reputation: 2197

How to set height of two columns to the height of the smaller one

I have two columns, as illustrated by this pen. I'm looking for a CSS-only solution (flexbox allowed, obviously) to set the height of the left column to the height of the right column (which is the smaller one), so that it gets its own scrollbar. Is there a way to achieve this? Here's the code from the pen…

HTML:

<div class="container">
  <ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <div class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ipsa nihil quisquam obcaecati labore exercitationem, suscipit placeat. Aut soluta odit fuga vel sed est. Quod quisquam impedit libero. Laboriosam, magni!</p>
  </div>
</div>

(S)CSS:

.container {
  display: flex;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.list {
  flex: 1;
  overflow-y: auto;
}

.content {
  flex: 4;
}

Upvotes: 5

Views: 1216

Answers (2)

silvenon
silvenon

Reputation: 2197

This seems to work fine:

  1. wrap .list in a wrapper (say .list-outer)
  2. apply styles of .list to .list-outer instead
  3. set height of .list to 0

Upvotes: 1

Jedi
Jedi

Reputation: 87

CSS:

.container {
  display: flex;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  max-height: 150px;
}

.list {
  flex: 1;
}

.content {
  flex: 4;
}

When you want to get it dynamic, use Javascript
Sample JS code:

$(document).ready(
  function()
  {
    var lenContent = $(".content").height;
    $(".container").css("max-height", lenContent);
  }
)

Thank you,

Upvotes: 0

Related Questions