Hiding overflowing div

byMR

July 30, 2022

Hi everyone i want to know how can i solve this problem?

the overflow

.ticket_keeper element is child of .ticket element i want to know how can i hide overflow because of the height

and here is my css code…

.list > .ticket{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 24px;
   gap: 8px;
   width: 320px;
   height: auto;
   background: #C440A1;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 16px 32px rgba(0, 0, 0, 0.08);
   border-radius: 8px;
   overflow: hidden;
   flex: none;
   order: 1;
   flex-grow: 0;
}
.list > .ticket > .ticket_keeper{
   opacity: .5;
   background-color: #ddd;
   margin:-24px;
   width: 367px;
   height: 250px;
   position: absolute;
   order:9;
}

and related HTML is here

 <div id={props.id} className={"ticket "+props.ticketColor} onDragOver={AllowDrop} onDrop={Drop} draggable="true" onDragStart={Drag}>
    <h2 className="ticket_title">
      {props.ticketTitle}
    </h2>
    <div className="ticket_content">
      {props.ticketContent}
    </div>
    <div className="ticket_badge_ghost">
      <span className="ticket_badge_text">{props.badge}</span>
    </div>
    <div className="ticket_keeper"></div>
  </div>

>Solution :

Add position:relative; to .list > .ticket, and change the styles for .list > .ticket > .ticket_keeper as below:

.list > .ticket > .ticket_keeper {
  opacity: 0.5;
  background-color: #ddd;
  position: absolute;
  inset:0 0 0 0;
}

Here is a working simplified version of your code:

.ticket {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 8px;
  width: 320px;
  height: auto;
  background: #c440a1;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 16px 32px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  flex: none;
  order: 1;
  flex-grow: 0;
  position:relative;
}
.ticket > .ticket_keeper {
  opacity: 0.5;
  background-color: #ddd;
  position: absolute;
  inset:0 0 0 0;
  border-radius: 8px;
}

<div id={props.id} class="ticket" onDragOver={AllowDrop} onDrop={Drop} draggable=" true" onDragStart={Drag}>
  <h2 className="ticket_title">
    title
  </h2>
  <div class="ticket_content">
    Contnet
  </div>
  <div class="ticket_badge_ghost">
    <span class="ticket_badge_text">bage</span>
  </div>
  <div class="ticket_keeper"></div>
</div>