-1

I have a div B that overlays another div A when an action is triggered, such that when A is shown it fully covers B and when B is show it fully covers A.

I would like the height/width of the B div to take up as much space as it needs to show it's content or the height/width of A whichever is larger.

And vice versa I would like the height/width of the A div to take up as much space as it needs to show it's content or the height/width of B whichever is larger.

Use case is a popover that shows some content in a panel then clicking a button slides in another panel over it whose content may have larger dimensions and I want the initial popover size to be the largest width/height of either so it size stays constant and not grow and shrink depending which panel is showing.

.parentToBoth {
    position: relative;
    max-height: 400px;
    margin-top: 50px;
}

.A {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: pink;
}

.B {
    position: absolute;
    top: 0;
    left: 0;
    z-inde: 90;
    background-color: yellow;
}


function setTopBottom(top, bottom) {
    if (top) {
        top.setAttribute("style", "z-index: 100");
    }
    if (bottom) {
        bottom.setAttribute("style", "z-index: 50");
    }
}

function getDivs() {
    let A = document.getElementsByClassName('A');
    let B = document.getElementsByClassName('B');
    return {
        A: A[0],
        B: B[0]
    }
}

function showA() {
    let elements = getDivs();
    setTopBottom(elements.A, elements.B);
}

function showB() {
    let elements = getDivs();
    setTopBottom(elements.B, elements.A);
}
.parentToBoth {
    position: relative;
    max-height: 400px;
    margin-top: 50px;
}

.A {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: pink;
}

.B {
    position: absolute;
    top: 0;
    left: 0;
    z-inde: 90;
    background-color: yellow;
}
<button class=showA onClick="showA()">
    Show A
</button>

<button class=showB onClick="showB()">
    Show B
</button>

<div class=parentToBoth>
    <div class=A>
        this is the A div
        <p>
            Some more text in A a is wider
        </p>
    </div>

    <div class=B>
        this is the B div
        <p>
           Here Bs content
        </p>
        <p>
           bottom is longer
        </p>
    </div>

</div>

https://jsfiddle.net/tirams/nu8jzuux/

claya
  • 1,920
  • 1
  • 18
  • 32
  • Clicking the "show a" and "show b" buttons in your fiddle doesn't seem to do anything. And you'll probably want to add `right: 0; bottom:0;` or `width:100%; height: 100%` to both `.A` and `.B` – henry May 04 '16 at 00:12
  • Just trying to understand what you're asking: `.parentToBoth` needs to be tall enough to fit all of `.A`s content or `.B`s content, whichever is taller (+ padding maybe), and then `.A` and `.B` will sized to the full height of `.parentToBoth`? – henry May 04 '16 at 00:14
  • @henry my apologizes, I updated the jsfiddle link. Yes trying to have size be dependent on both max of .A and .B size – claya May 04 '16 at 16:39

1 Answers1

0

Judging by the script in your demo, you're already using js and comfortable with it. I'd use js to check the height of A and the height of B, and set the height of parentToBoth to the greater of the two.

For getting the height, see e.g. https://stackoverflow.com/a/28155507/1241736

Community
  • 1
  • 1
henry
  • 4,244
  • 2
  • 26
  • 37
  • hmm is there no css only way to accomplish it? the js is in components in react – claya May 04 '16 at 20:35
  • the trouble is once you make an element `position: absolute` you take it out of the flow - as far as the parent is concerned, it's dimensionless – henry May 04 '16 at 20:48
  • if you knew that either A or B was always going to be the taller, you could have an invisible duplicate of that taller one: `
    (a content)
    (a content)
    (b content)
    ` + `.a_prime {visibility: hidden}`. that would make the parent container size up to fit a
     – henry May 04 '16 at 20:51