2

I am currently trying to style a modal, and need to get a button to be placed at the bottom of a div. This is within a few other elements, and what I've noticed is that at some point flex-grow and justify-content seem to stop adjusting the content.

Does Flexbox work in infinite depth? Or is there a time when it simply refuses to resize, due to being within too many elements?

<div class="modal" style="display:flex; flex-direction:column;">
<div class="modal-header"style="flex-grow:1;"></div>
<div class="modal-row" style="display:flex;flex-grow:18;">
    <div class="modal-page-left"></div>
    <div class="modal-content"style="display:flex;flex-direction:column;">
        <div class="content-title" style="flex-grow:1"></div>
        <div class="content-image"style="flex-grow:18"></div>
        <div class="content-button"style="flex-grow:1"></div>
    </div>
    <div class="modal-page-right"></div>        
</div>
<div class="modal-footer hidden" style="flex-grow:1;"></div>

What I basically need, is for content-button to be at the buttom. It should be noted that modal-footer, is actually hidden, so it's flex grow is ignored.

MartinArrJay
  • 139
  • 8
  • 2
    Can you show us your code ? – Corentin Branquet Oct 18 '17 at 12:41
  • 2
    No, Flexbox doesn't work in infinite depth, it only affects the direct children of the flex containers (the flex items). But you can make these children flex containers for their children (by setting them `display:flex`), and so on. – Ilya Streltsyn Oct 18 '17 at 12:44
  • You can just put `flex-grow` and expect it to do anything on child elements that aren't within a flex container - i.e. `display: flex` – Adam Jenkins Oct 18 '17 at 12:56
  • Can't show the code right now. I do have elements with flex-grow directly within a element with display: flex. It simply seems to ignore any and all flex options. Is there possibly an issue with using top, left, height or any other more manual adjustments, that would cause flex to stop working within an element? – MartinArrJay Oct 18 '17 at 13:01
  • If you can't show code, the likelihood of receiving a solution is virtually nil. There could be any number of *manual adjustments* that cause things to **stop working** (i.e. not work the way you expect them to). If you could show your code, even a stripped down version of it, then you'd probably get a solution relatively quickly. – Adam Jenkins Oct 18 '17 at 13:13
  • Added a approximation. mostly I'm _fairly_ certain that it's not a typing error in my code, but rather an issue with my limited understand of Flexbox – MartinArrJay Oct 18 '17 at 13:17
  • Been trying to add the code, but there is a large .less file that i cannot get copied correctly in due to formatting. Pastebin okay for something like that? The 100% in the referenced question thing, does not work. – MartinArrJay Oct 19 '17 at 06:18
  • Nevermind, I made a dumb. That answer does in fact solve the problem. – MartinArrJay Oct 19 '17 at 06:38

0 Answers0