Display: block property prevents my element to align inside a div element

Question

I have a problem with my css. I cant do a align-items: end on button element.

The browser says: The display: block property prevents align-items from having an effect. Try setting display to something other than block

If I change the display to flex on the parent div the hole cards are messed up. Any suggestions on this? Im posting the html and css part down below.

 <div class="flex-center">
                <div class="portfolio__cards">
                    <div class="portfolio__cards__scroll">
                        <div id="card1" class="card">
                            <h2>OSC Website</h2>
                            <p id="card1text">A website to serve as a landing page for new members as a hub of information about the club, with a dynamic blog and content management system.
                                Built in Javascript, HTML, CSS, with the frameworks/tools: NodeJS, Express, EJS.
                            </p>
                            <button onclick="location.href = 'https://github.com/ufosc/Club_Website_2';">SOURCE</button>

                        </div>
                        <div id="card2" class="card">
                            <h2>Schedule Helper</h2>
                            <p id="card2text"> A website to assist students in creating schedules that work for them by using UF's Schedule of Courses along with
                                RateMyProfessor and GatorEval scores. Built in Typescript and Python, with the frameworks/tools: React, Tailwind.
                            </p>
                            <button onclick="location.href = 'https://github.com/ufosc/Schedule_Helper';">SOURCE</button>
                        </div>
                        <div id="card3" class="card">
                            <h2>Lunch Buddy</h2>
                            <p id="card3text">An application that lets you find and match with like-minded students on campus to study, have a meal with, and more!
                                Built with React Native for the front-end, Golang for the back-end, and MySQL.
                            </p>
                            <button onclick="location.href = 'https://github.com/ufosc/Lunch_Buddies';">SOURCE</button>
                        </div>
                        <div id="card4" class="card">
                            <h2>Manim</h2>
                            <p id="card4text">Inspired by 3Blue1Brown, creating a plug-in that adds to the Manim project which would allow for programmatic animation of computer science concepts.
                                Built in Python, with the frameworks/tools: Poetry, Manim. Working to be better than Tinder.
                            </p>
                            <button onclick="location.href = 'https://github.com/ufosc/manim-data-structures';">SOURCE</button>
                        </div>
                        <div id="card5" class="card">
                            <h2>API Group</h2>
                            <p id="card5text">Working on several small projects that involve APIs to gain knowledge about building and using them. Built in Python,
                                with FastAPI.
                            </p>
                            <button onclick="location.href = 'https://github.com/ufosc/UF-API-GROUP';">SOURCE</button>
                        </div>
                        <button class="portfolio__cards__scroll__btn-left"><img src="./assets/left-swipe-arrow.png" alt="left arrow"></button>
                        <button class="portfolio__cards__scroll__btn-right"><img src="./assets/left-swipe-arrow.png" alt="right arrow"></button>
                    </div>
                </div>
            </div>

The CSS part

.portfolio__cards__scroll {
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    gap: 20px;
    scroll-behavior: smooth;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio .portfolio__cards {
    position: relative;
    width: 100vw;
    max-width: 1200px;
    overflow: hidden;
    padding: 30px;
}

.portfolio .portfolio__cards__scroll .card {
    padding: 20px;
    border-radius: 20px;
    min-width: 300px;
    max-width: 300px;
    display:inline;
}
.portfolio .portfolio__cards__scroll .card button {
    background-color: black;
    color: white;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    border: none;
    display: inline;
}

All i want is the button to stay at the buttom of the card while the size of the card remain the same for all other cards. But atm the side look like this.enter image description here

I tried:

• giving the parent element a display: flex (ruined the card completely.
• setting the buttons on the bottom by using: align-self: end or align-items- end

aligning everything inside the card at the end (sets everything inside the card at the bottom and the size of the card become different (see picture)enter image description here

Answer 1

All you need to do is make the card component have a display: flex with a flex-direction of column, so as to stack the content vertically.

Due to the way margin works within elements with a display of flex (and their flex-items) you can simply write margin-top: auto on the button and this will push it all the way down until it reaches the end of the flex container (in this case) or another flex item.

Make these changes to your CSS file:

.portfolio .portfolio__cards__scroll .card {
    padding: 20px;
    border-radius: 20px;
    min-width: 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;

}
.portfolio .portfolio__cards__scroll .card button {
    background-color: black;
    color: white;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    border: none;
    display: inline-block;
    margin-top: auto;
}