如何阻止 CSS 网格单元因文本内容而扩展？

Question

所以我附上了一张屏幕截图，我希望我的内容单元格的高度停止扩展超过 600 像素，因为屏幕缩小时的文本会导致奇怪的设计视图。相反，我希望文本更改为较小的尺寸或更改为滚动行为。

我的相关CSS代码。

.chars{
    padding: 100px;
    padding-top: 32px;
    margin-bottom: 32px;
    display:grid;
    grid-template-columns: auto auto auto;
    grid-auto-flow: dense;
    row-gap: 24px;
    border-top: 1px solid rgb(168, 168, 168);
    border-bottom: 1px solid rgb(168, 168, 168);
    transition: all 0.5s;
    min-width: 400px;
    min-height: 600px;
    overflow: hidden;
}

/* Setting all images of characters to fit in their cells. */
.chars img{
    width:400px;
    height:auto;
    border-radius: 3%;
    transition: 0.3s;
}

.chars img:hover{
    width: 413px;
    height: auto;
}

.char1-img, .char3-img, .char5-img{
    grid-area: auto/1/auto/1;
    padding-top: 12px;
    padding-bottom: 12px;
}

.char1-content,.char3-content,.char5-content{
    grid-area: auto/2/auto/ -1;
    align-self: center;
    justify-self: center;

    font-family: 'Open Sans', sans-serif;
    font-size: 22px
}

.char2-img,.char4-img,.char6-img{
    grid-area: auto/3/auto/3;
    padding-top: 12px;
    padding-bottom: 12px;
}

.char2-content,.char4-content,.char6-content{
    grid-area: auto/1/auto/ span 2;

    padding-top: 12px;
    padding-bottom: 12px;

    align-self: center;
    justify-self: center;

    font-family: 'Open Sans', sans-serif;
    font-size: 22px
}

.char1-content p,
.char2-content p,
.char3-content p,
.char4-content p,
.char5-content p,
.char6-content p
{
    background-image: linear-gradient(to right, rgba(235, 235, 235, 0), rgba(228, 228, 228, 0.8));
    padding-top: 32px;
    padding-left: 150px;
    padding-right: 150px;
    padding-bottom: 32px;
    
    border-radius: 1%;

    color:grey;
}

.char1-content h1,
.char3-content h1,
.char4-content h1,
.char5-content h1,
.char2-content h1,
.char6-content h1
{
    text-align: center;
}

HTML 代码

<section class="chars">
            <div class="char1-img">
                <img src="./images/Leona.jpg">
            </div>
            <div class="char1-content">
                <h1>The Creed of Face Swappers</h1>

                <p>
                    Leon Harper or rather Leona Harper is part of a creed of Assassins and spies who have the uncanny
                    ability to morph into any face they desire so as long as it is of the same gender and once they are
                    in
                    contact of it with the intent of morphing, Leona however is special even among her peers due to her
                    ability to not only swap faces but also into one of any man or woman this has undoubtedly led her to
                    be
                    one of the most proficient and competent among the rest despite being a new recruit placing her in
                    high
                    regards for the Elders in the Creed.
                    Much to the confusion surrounding her actual gender she has occasionally put out that she prefers to
                    spend most of her time as a woman and to be addressed as Leona rather than her male counterpart
                    "Leon".
                    Whatever the case may be no one can deny her stunningly enchanting appearance regardless of what she
                    chooses to go by.
                </p>
            </div>
            <div class="char2-img">
                <img src="./images/Elizabeth.jpg">
            </div>
            <div class="char2-content">
                <h1>Flames Of The Old World</h1>

                <p>
                    Elizabeth Burnley, a once-promising doctor, scientist, and scholar in a world where those
                    professions are distant memories. Raised in a post-apocalyptic realm ravaged by a relentless virus,
                    Elizabeth's life took a tragic turn when she lost her father to the very disease he fought to cure.
                    As she now navigates a harsh existence within a hidden vault, her journey as a doctor accompanying
                    search parties outside takes an unexpected turn, challenging her to adapt and survive in a world
                    where danger and mystery lurk at every corner.
                </p>
            </div>
            <div class="char3-img">
                <img src="./images/abiha-al-farsi.jpg">
            </div>
            <div class="char3-content">
                <h1>Abiha-al-Farsi</h1>

                <p>
                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
                    born and I will give you a complete account of the system, and expound the actual teachings of the
                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
                </p>
            </div>
            <div class="char4-img">
                <img src="./images/katrya.jpg">
            </div>
            <div class="char4-content">
                <h1>The Ukranian Civil War</h1>

                <p>
                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
                    born and I will give you a complete account of the system, and expound the actual teachings of the
                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
                </p>
            </div>
            <div class="char5-img">
                <img src="./images/1.jpg">
            </div>
            <div class="char5-content">
                <h1>Broken Dreams</h1>

                <p>
                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
                    born and I will give you a complete account of the system, and expound the actual teachings of the
                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
                </p>
            </div>
            <div class="char6-img">
                <img src="./images/9.jpg">
            </div>
            <div class="char6-content">
                <h1>Blood Pact</h1>

                <p>
                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
                    born and I will give you a complete account of the system, and expound the actual teachings of the
                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
                </p>
            </div>
        </section>

我使用了溢出、最小最大高度/宽度，但不起作用。

Answer 1

在您的 p 标签选择器上添加：

max-height: 600px;
overflow-y: auto;