Html Question posted in
Some basic documentation can be found here.

Html – css relative positioned div text content expanding and overlapping

I am struggling to prevent a relative positioned div text content from overflowing outside of the bounds.

Markup:

<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;
}

Check this JFiddle to show the problem

enter image description here

Tags:

3

Answers


  1. 0

    You should add overflow: hidden; or remove max-height from parent.

    .parent {
    margin: 5px;
    max-width: 400px;
    max-height: 100px;
    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>
    Login or Signup to reply.
  2. 0

    you can change max-height unit from px to vh it will work for you

    .parent {
    margin: 5px;
    max-height: 100vh;
    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>
    Login or Signup to reply.
  3. 0

    The only thing that comes to mind using height and overflow on exact same elements as you is line clamp

      .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;
    }
    
    .detail2 {
      grid-row: 2;
    }

.common {
  line-height: 25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; 
}
    <div class="parent">
    <div class="details">
        <div class="detail1 common">
           lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext
        </div>
        <div class="detail2 common">
     lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext lotsoftext
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search