css相对定位的div文本内容扩展和重叠

Question

我正在努力防止相对定位的 div 文本内容溢出到边界之外。

标记：

<div class="parent">
    <div class="details">
        <div class="detail1">
           lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext
        </div>
        <div class="detail2">
           lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext 
           lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext 
        </div>
    </div>
</div>

CSS：

.parent {
    margin: 5px;
    max-height: 100px;
    max-width: 400px;
    background: pink;
}

.details {
     width: 100%;
     text-align: center;
     font-size: 14pt;
     display: grid;
     grid-template-rows: 1fr 1fr;
 }

.detail1 {
    grid-row: 1;
    overflow-y: hidden;
}

.detail2 {
    grid-row: 2;
    overflow-y: hidden;
}

检查这个JFiddle以显示问题

Answer 1

您给出了最大高度。你应该删除它。

.parent {
    margin: 5px;
    max-width: 400px;
    background: pink;
}

.details {
     width: 100%;
     text-align: center;
     font-size: 14pt;
     display: grid;
     grid-template-rows: 1fr 1fr;
 }

.detail1 {
    grid-row: 1;
    overflow-y: hidden;
}

.detail2 {
    grid-row: 2;
    overflow-y: hidden;
}

<div class="parent">
    <div class="details">
        <div class="detail1">
           lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext
        </div>
        <div class="detail2">
           lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext 
           lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext lotsmoretext 
        </div>
    </div>
</div>