Home Position element at the bottom of container without flex or position absolute

Questions

Position element at the bottom of container without flex or position absolute

February 25, 2022

I’m trying to make a component that uses both a background color for half of the component and
an image for the other half, with the image acting as an element with a margin. The problem I’m having is that I cannot use display flex to space elements correctly in the content area, it breaks the component with the current solution I’m using and I have no idea why.

I’m specifically trying to position .service__link at the bottom of .service__content. I’ve tried using paddings/margins to get it in place, but at smaller screen sizes it ends up overflowing out of the box.

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    font-family: Arial;
}

.service-container {
    max-width: 1800px;
    margin-inline: auto;
    padding: 40px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.service {
    flex: 1 1 calc(33.3336% - 1.5rem);
    display: inline-block;
    position: relative;
    background: #144088;
    min-height: 325px;
    border: 2px solid #144088;
    color: white;
}

.service::before {
    content: "";
    float: right;
    width: 100%;
    height: 100%;
    background: url(https://images.unsplash.com/photo-1645069258059-6f5a71256c4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80) left center/150%;
    shape-outside: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
    clip-path: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
    shape-margin: .3em;
}

.service::after {
    content: "01";
    position: absolute;
    top: 0;
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    opacity: 25%;
}

.service__content {
    padding: 3rem 0 1rem 1rem;
    height: 100%;
}

.service__title {
    font-size: 26px;
}

.service__description {
    font-size: clamp(12px, 3vw + .25rem, 16px);
}

.service__title, .service__description {
    margin-bottom: 1rem;
}

.service__link {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 35%;
}

.service__link a {
    color: white;
}

.service__link img {
    filter: brightness(0)invert(1);
}

@media screen and (max-width: 1200px) {
    .service {
        flex: 0 1 518px;
    }
}

<body>
   <div class="service-container">
       <div class="service">
            <div class="service__content">
                <h4 class="service__title">Lorem</h4>
                <p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
                <div class="service__link">
                    <a href="#">Link</a>
                    <img src="https://img.icons8.com/ios/26/000000/image.png"/>
                </div>
            </div>
        </div>
        <div class="service">
            <div class="service__content">
                <h4 class="service__title">Lorem</h4>
                <p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
                <div class="service__link">
                    <a href="#">Link</a>
                    <img src="https://img.icons8.com/ios/26/000000/image.png"/>
                </div>
            </div>
        </div>
        <div class="service">
            <div class="service__content">
                <h4 class="service__title">Lorem</h4>
                <p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
                <div class="service__link ">
                    <a href="#">Link</a>
                    <img src="https://img.icons8.com/ios/26/000000/image.png"/>
                </div>
            </div>
        </div>
   </div>
</body>

What is going on when display: flex is added to .service__content?

Also, if anybody has a better idea of how to make this component in general I’d love to hear it.

Thanks!