Overflow: hidden not working on flex display

Question

I've been experimenting with integrating something like this star rating script in to my Laravel app, and copy/pasted the relevant code. It works fine except the overflow: hidden property on the front-stars class isn't working as expected. Instead of being hidden, they just display below the rest.

This works fine when tested on CodePen, but it seems that something else perhaps interferes with this on my own page. What could be causing this to happen?

My code on Codepen

<style>
%flex-display {
    display: flex;
}
.back-stars {
    @extend %flex-display;
    color: #000;
    position: relative;
    text-shadow: 1px 1px 3px #000;
}
.star-rating {
    @extend %flex-display;
    align-items: center;
    font-size: 15px;
    justify-content: center;
}
.front-stars {
    @extend %flex-display;
    color: #FFBC0B;
    overflow: hidden;
    position: absolute;
    text-shadow: 2px 2px 5px #d29b09;
    top: 0;
    transition: all .5s
}
</style>

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Info</div>
                    <div class="card-body">

                    <table id="dtInfo" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th scope="col">Title</th>
                                    <th scope="col">Software</th>
                                    <th scope="col">Machine</th>
                                    <th scope="col">Rating</th>
                                    <th scope="col">Author</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($profiles as $profile)
                                <tr>
                                    <td><a href="{{ route('profile.show', $profile->id) }}">{{ $profile->title }}</td>
                                    <td>{{ $profile->slicer }}</td>
                                    <td>{{ $profile->machine }}</td>
                                    <td>
                                        <div class="star-rating" title="{{$profile->averageRating()}}">
                                            <div class="back-stars">
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>
                                                <i class="fa fa-star-o" aria-hidden="true"></i>

                                                <div class="front-stars" style="width: {{$profile->ratingPercent()}}%">
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>Username</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

Since your target element .front-stars is absolutely positioned and it has no height specified, overflow does not really work there.

You need to provide a specific height where the element should stop and hide the overflown elements. That's how overflow works,

According to your codepen:

.front-stars {
    @extend %flex-display;
    color: #FFBC0B;
    width: 50%;
    height: 24px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: all .5s
}

Also, try to reduce the darkness from the stars, so that it may look a bit nicer.

Learn more about how overflow works here