CSS flex-grow height unequal, flex-basis not fixing

Asked Nov 24 '17 at 06:26

Active Nov 24 '17 at 07:38

Viewed 189 times

I'm trying to get the heights of these items to be the same no matter how much content is inside, but I keep getting the content to cause uneven heights.

Code in a simplified version of ReactJS Code:

<div className='flex flex-column height-100-percent'> //Page Area
     <div className='flex justify-between'>
        Words...
     </div>
     <div className='flex flex-grow flex-wrap'> // Div with days 
        {<div className='width-25-percent'>
             <Scheduler className='width-160-pixel'... /> 
        </div>} TIMES SEVEN....
     </div>
 </div>

The classNames should be self-explanatory. I tried to use flex-basis of 0, 100%, and auto with no luck. I also tried flex: 1 with no luck.

edited Nov 24 '17 at 07:19

Asons

84,923
12
110
165

asked Nov 24 '17 at 06:26

Kevin Danikowski

4,620
6
41
75

1

https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container possible duplicate. – Cons7an7ine Nov 24 '17 at 07:01
1

I answered it using a method they didn't suggest in the answers: https://stackoverflow.com/a/47468531/8430249 , thank you for comments! – Kevin Danikowski Nov 24 '17 at 07:45

CSS flex-grow height unequal, flex-basis not fixing

0 Answers0