Help. Why are my days stretching only on certain months?

[bvelasquez]

Purposely styled the component to illustrate the issue I'm having. The days are stretched only on certain months. October looks correct, but Aug, and Sept. are stretched. No additional styling except for the color changes.

I did notice that it only happens when numberOfMonths is greater than 1.

Edit: Ok, October has 6 rows of data. The other two months only 5 rows of data. So, they are stretching to maintain size with the October table. any way to correct this?

[Kosai106]

(Not an answer but didn't feel like creating a new discussion/issue is necessary)

I came to try and find a solution to this exact thing.

In our case it's not a big deal but it does look weird and I'd love for a way to opt out of this behaviour.

[tjfred35]

The CSS reason for this is:

.DayPicker-Months {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

flexbox is stretching vertically by default. Changing it to this makes it look like this instead:

.DayPicker-Months {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start; /** ADD THIS HERE */
}

https://codesandbox.io/s/react-day-picker-examples-modifiers-forked-9m4ih?file=/example.js

[Kosai106]

Oh man, you are amazing. 👏
I've been trying a bunch of different things already on the .DayPicker-Day class, I hadn't considered targeting the wrapper.