1

I have a two items flex row with a first item that has some content (image, texts vertically positioned) and a second item that has potentially a lot of text content (lists). Now, I want the second item to scroll vertically once it is larger than the first item.

See this simple example:

.container{
  border: 1px solid black;
  display: flex;
}

.box { width: 300px; color:#fff; }
.box1 { background:blue; height: 100px }
.box2 { background:red; overflow-y: auto; }
<div class="container">
  <div class="box box1">Item with some height</div>
  <div class="box box2">
    Some details (should scroll vertically if larger than left box)
    <br/> content1<br/> content2<br/> content3
    <br/> content4<br/> content5<br/> content6
    <br/> content7<br/> content8
  </div>
</div>

Scrolling only works if I set the container to fixed height but I really want to avoid that because the height should be determined by the first item of flex row. How can I do that?

Steffen Harbich
  • 2,639
  • 2
  • 37
  • 71
  • Thanks for the quick help :) – Steffen Harbich Mar 30 '21 at 12:53
  • 1
    like that? - https://ibb.co/x8G6Q1P Should the blue box grow if its content overflows the current height? – s.kuznetsov Mar 30 '21 at 12:56
  • 1
    In my real case the blue box height is determined by its contents (not fixed height as in my example). Anyway, the referenced question and answer is working well for me (I tried height: 0, min-height: 100% approach). So, thanks for help. – Steffen Harbich Mar 30 '21 at 13:02

0 Answers0