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

Css – Adjust flex item to be as tall as needed, but no taller than container

I’m trying to replicate the same effect that you see on Trello in how a list is only as tall as needed, up to a limit determined by the list container.

.container{
  background-color: #00000020;
  display: flex;
  gap: 1em;
  height: 80vh;
  /*align-items: flex-start; */
  justify-content: space-around;
}

.variableHeightBlock {
  background-color: #00000020;
  overflow-y: auto;
  padding: 1em;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
  <div class="container">
    <div class="variableHeightBlock">
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line
    </div>
    <div class="variableHeightBlock">
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line
    </div>
  </div>

You can see here that I’ve almost got it – there’s two elements here and since one is taller than the container it gets capped off and is scrollable. What I don’t like about this is that the other element is needlessly tall.
If you uncomment the "align-items" line, you’ll get the opposite problem – the shorter element is now properly sized, but the larger element spills outside the boundaries of the container.
How can I edit the CSS here to get both effects – left element is only as large as needed, and the right element becomes scrollable rather than overflowing from the container?

Tags:

2

Answers


  1. 0

    Just add max-height: 100%; and box-sizing: border-box; in .variableHeightBlock.

    .container{
  background-color: #00000020;
  display: flex;
  gap: 1em;
  height: 80vh;
  align-items: flex-start;
  justify-content: space-around;
}

.variableHeightBlock {
  background-color: #00000020;
  overflow-y: auto;
  padding: 1em;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  max-height: 100%;
  box-sizing: border-box;
}
    <div class="container">
    <div class="variableHeightBlock">
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line
    </div>
    <div class="variableHeightBlock">
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line
    </div>
  </div>
    Login or Signup to reply.
  2. 0

    What you can do is uncomment the line align-items: flex-start; in the .container block and add max-height: calc(100% - 2em); to the .variableHeightBlock. We substract 2em from 100% using the function calc() because of the padding: 1em set to the element (padding-top 1em plus padding-bottom 1em).

    So the final code will be :

    .container{
  background-color: #00000020;
  display: flex;
  gap: 1em;
  height: 80vh;
  align-items: flex-start; /* uncomment this line */
  justify-content: space-around;
}

.variableHeightBlock {
  background-color: #00000020;
  overflow-y: auto;
  padding: 1em;
  max-height: calc(100% - 2em); /* <== add this line */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
      <div class="container">
    <div class="variableHeightBlock">
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line
    </div>
    <div class="variableHeightBlock">
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line<br/>
      line
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search