html - 溢出 : hidden not working on flex display

Question

我一直在尝试集成类似这样的东西 star rating script进入我的 Laravel 应用程序，并复制/粘贴相关代码。除了 front-stars 类上的 overflow: hidden 属性没有按预期工作之外，它工作正常。它们不会被隐藏，而是显示在其余部分的下方。

这在 CodePen 上测试时工作正常，但似乎其他东西可能会干扰我自己页面上的这个。是什么导致了这种情况的发生？

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

由于您的目标元素 .front-stars 是绝对定位的，并且没有指定高度，因此 overflow 在那里不起作用。

您需要提供一个特定的高度，元素应该在该高度停止并 overflow hidden 的元素。这就是溢出的工作原理，

根据您的codepen:

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

此外，尽量减少来自星星的黑暗，这样它看起来会更好一些。

详细了解溢出的工作原理 here