Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1318

Height of flex container determined by specific child [duplicate]

$
0
0

on my page I have three divs next to each other. One main content and two sidebar type things. They all have dynamic content and no fixed heights.

What I want is that the main child determines the height of the container. And the two sidebar containers adhere to that. So the sidebars should be as high as needed, but not higher than the main-child. (If they have more content to show, then they should get a vertical scroll-bar instead)

What I have in my current solution is that the height of the container is determined by the tallest child. This is not what I want.

This codesandbox shows the issue:https://codesandbox.io/p/sandbox/sidebar-height-92pgch

How can I achieve that the container height is only determined by the main-child?

Regards

Code snippets:

<style>      .container {        display: flex;        align-items: flex-start;      }      .container .main-child {        flex-grow: 1;        background-color: salmon;      }      .container .sidebar {        min-width: 300px;        max-width: 300px;        overflow-y: auto;      }</style>
<body><h1>Sidebar height problem</h1><div><p>        Currently, the container height is always determined by the largest flex        child (in the first example by the rightmost sidebar and in the second        example by the main-child).</p><p>        What I want instead, is that only the main-child determines the height.</p><p>        The sidebars should be only as high as needed for their content, but<b>not</b> larger than the main-child. And if one of the sidebars is        larger because of it's content, then it should have a scrollbar.</p></div><div class="container"><div class="main-child">        A wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart. I am alone,        and feel the charm of existence in this spot, which was created for the        bliss of souls like mine. I am so happy, my dear friend, so absorbed in        the exquisite sense of mere tranquil existence, that I neglect myA        wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart. I am alone,        and feel the charm of existence in this spot, which was created for the        bliss of souls like mine. I am so happy, my dear friend, so absorbed in        the exquisite sense of mere tranquil existence, that I neglect my like        these sweet mornings of spring which I enjoy with my whole heart. I am        alone, and feel the charm of existence in this spot, which was created        for the bliss of souls like mine. I am so happy, my dear friend, so        absorbed in the exquisite sense of mere tranquil existence, that I        neglect my. I am alone, and feel the charm of existence in this spot,        which was created for the bliss of souls like mine. I am so happy, my        dear friend, so absorbed in the exquisite sense of mere tranquil        existence, that I neglect my</div><div class="sidebar">        A wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart.</div><div class="sidebar">        A wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart. I am alone,        and feel the charm of existence in this spot, which was created for the        bliss of souls like mine. I am so happy, my dear friend, so absorbed in        the exquisite sense of mere tranquil existence, that I neglect my        talents. I should be incapable of drawing a single stroke at the present        moment; and yet I feel that I never was a greater artist than now. When,        while the lovely valley teems with vapour around me, and the meridian        sun strikes the upper surface of the impenetrable foliage of my trees,        and but a few stray gleams steal into the inner sanctuary,</div></div><div class="container"><div class="main-child">        A wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart. I am alone,        and feel the charm of existence in this spot, which was created for the        bliss of souls like mine. I am so happy, my dear friend, so absorbed in        the exquisite sense of mere tranquil existence, that I neglect my        talents. I should be incapable of drawing a single stroke at the present        moment; and yet I feel that I never was a greater artist than now. When,        while the lovely valley teems with vapour around me, and the meridian        sun strikes the upper surface of the impenetrable foliage of my trees,        and but a few stray gleams steal into the inner sanctuary, I throw        myself down among the tall grass by the trickling stream; and, as I lie        close to the earth, a thousand unknown plants are noticed by me: when I        hear the buzz of the little world among the stalks, and grow familiar        with the countless indescribable forms of the insects and flies, then I        feel the presence of the Almighty, who formed us in his own image, and        the breath A wonderful serenity has taken possession of my entire soul,        like these sweet mornings of spring which I enjoy with my whole heart. I        am alone, and feel the charm of existence in this spot, which was        created for the bliss of souls like mine. I am so happy, my dear friend,        so absorbed in the exquisite sense of mere tranquil existence, that I        neglect my talents. I should be incapable of drawing a single stroke at        the present moment; and yet I feel that I never was a greater artist        than now. When, while the lovely valley teems with vapour around me, and        the meridian sun strikes the upper surface of the impenetrable foliage        of my trees, and but a few stray gleams steal into the inner sanctuary,        I throw myself down among the tall grass by the trickling stream; and,        as I lie close to the earth, a thousand unknown plants are noticed by        me: when I hear the buzz of the little world among the stalks, and grow        familiar with the countless indescribable forms of the insects and        flies, then I feel the presence of the Almighty, who formed us in his        own image, and the breath A wonderful serenity has taken possession of        my entire soul, like these sweet mornings of spring which I enjoy with        my whole heart. I am alone, and feel the charm of existence in this        spot, which was created for the bliss of souls like mine. I am so happy,        my dear friend, so absorbed in the exquisite sense of mere tranquil        existence, that I neglect my talents. I should be incapable of drawing a        single stroke at the present moment; and yet I feel that I never was a        greater artist than now. When, while the lovely valley teems with vapour        around me, and the meridian sun strikes the upper surface of the        impenetrable foliage of my trees, and but a few stray gleams steal into        the inner sanctuary, I throw myself down among the tall grass by the        trickling stream; and, as I lie close to the earth, a thousand unknown        plants are noticed by me: when I hear the buzz of the little world among        the stalks, and grow familiar with the countless indescribable forms of        the insects and flies, then I feel the presence of the Almighty, who        formed us in his own image, and the breath A wonderful serenity has        taken possession of my entire soul, like these sweet mornings of spring        which I enjoy with my whole heart. I am alone, and feel the charm of        existence in this spot, which was created for the bliss of souls like        mine. I am so happy, my dear friend, so absorbed in the exquisite sense        of mere tranquil existence, that I neglect my talents. I should be        incapable of drawing a single stroke at the present moment; and yet I        feel that I never was a greater artist than now. When, while the lovely        valley teems with vapour around me, and the meridian sun strikes the        upper surface of the impenetrable foliage of my trees, and but a few        stray gleams steal into the inner sanctuary, I throw myself down among        the tall grass by the trickling stream; and, as I lie close to the        earth, a thousand unknown plants are noticed by me: when I hear the buzz        of the little world among the stalks, and grow familiar with the        countless indescribable forms of the insects and flies, then I feel the        presence of the Almighty, who formed us in his own image, and the breath</div><div class="sidebar">        A wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart.</div><div class="sidebar">        A wonderful serenity has taken possession of my entire soul, like these        sweet mornings of spring which I enjoy with my whole heart. I am alone,        and feel the charm of existence in this spot, which was created for the        bliss of souls like mine. I am so happy, my dear friend, so absorbed in        the exquisite sense of mere tranquil existence, that I neglect my        talents. I should be incapable of drawing a single stroke at the present        moment; and yet I feel that I never was a greater artist than now. When,        while the lovely valley teems with vapour around me, and the meridian        sun strikes the upper surface of the impenetrable foliage of my trees,        and but a few stray gleams steal into the inner sanctuary</div></div></body>

Viewing all articles
Browse latest Browse all 1318

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>