-2

something

Both elements can grow in height independently, however, I want the height of the container to always match the size of Element 2 while the height of Element 1 to grow in height as much as possible but never make the container grow past the height of Element 2. If the height of Element 1 is higher than the height of the container, Element 1 will get a scroll and not increase the size of the container.

I'm currently doing this in JavaScript in a really inefficient and I was wondering if I can maybe do this with CSS. Thank you.

Andrei Cucea
  • 69
  • 7
  • picture isn't showing. I don't know your problem so far... Have a look on flexbox, I think that's the onliest thing that will be a possibility for your description. I think it is not possible to limit element 1 to the height of element 2 with pure CSS without having something like overflow: hidden; But it's not possible in my view when you are having 2 independent elements – Schlumpf Jun 22 '17 at 22:24
  • I fixed the image. – Andrei Cucea Jun 22 '17 at 22:33

2 Answers2

1

Its possible to stretch them using flexbox. In this example the second container is streched to the first. More detailed: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.outer {
    align-items: stretch;
    display: flex;
}

.inner1 {
    min-height: 200px;
    width: 150px;
    background: blue;
}

.inner2 {
  background: orange;
  width: 150px;
}
<div class='outer'>
    <div class='inner1'></div>
    <div class='inner2'></div>
</div>
Schlumpf
  • 358
  • 1
  • 3
  • 13
-1

In this case i am using the jquery sample as below [Copy and open]

 [1]: https://jsfiddle.net/vk3qw09f/154/
Joelton Ding Ying Chor
  • 73
  • 10
  • Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Jun 23 '17 at 08:30