Как показать скрытый div над другим div в середине страницы вместо переполнения

Question

У меня есть несколько divs, к которым прикреплена дочерняя таблица, и они видны, когда мы нажимаем на эти div.

Но Divs в правой части страницы стол, который появляется, переполняется с экрана, где, как я хочу, он будет лежать слева на пустой части экрана, где есть другие div.

Я не уверен, могу ли я объяснить это так, вот скриншоты.

Как представляется, в настоящее время

Я хотел бы, чтобы она появилась для каждой таблицы, как это, но, как сейчас это происходит только центр DIVS

Мой Html

<div *ngIf="visibleTournament"> 
    <div class = "row"> 
    <div *ngFor="let entry of competitionTeams | keys"> 
     <div class="col-md-4" (mouseleave)= "entry.hideme = false"> 
     <div> 
      <div (click) = "entry.hideme = !entry.hideme" > 
      <div class = "groupBox"><div class="placed"><h3><span class = "label label-warning">Group - {{entry.key}}</span></h3></div></div> 
      </div> 
      <div class="well box" [hidden] = "!entry.hideme"> 
      <table class="table" width="100%"> 
       <thead class="thead-inverse"> 
       <tr> 
       <th>#</th> 
       <th>Team</th> 
       <th>Played Games</th> 
       <th>Points</th> 
       <th>Goals</th> 
       <th>GA</th> 
       <th>GD</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr *ngFor="let subValue of entry.value"> 
       <th scope="row">{{subValue.rank}}</th> 
       <td><img class="img-thumbnail small" src="{{subValue.crestURI}}">{{subValue.team}}</td> 
       <td>{{subValue.playedGames}}</td> 
       <td>{{subValue.points}}</td> 
       <td>{{subValue.goals}}</td> 
       <td>{{subValue.goalsAgainst}}</td> 
       <td>{{subValue.goalDifference}}</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

корреспондента Css

.avatar{ 
    width:30px; 
    height:30px; 
    margin-right: 10px; 
    background: rgba(0,0,0,0); 
    border: none; 
} 

.inline{ 
    display: inline-block; 
    margin: 10px 20px; 
} 

.check{ 
    min-width: 500px; 
} 

.selector{ 
    cursor: pointer; 
} 
.placed{ 
    margin: 0 auto; 
} 

.box{ 
    position: absolute; 
    text-align: center; 
    background: #ccffda; 
    padding: 10px 20px; 
    width: 600px; 
    border: darkgray 1px solid; 
    z-index: 1; 
} 


.groupBox{ 
    position: relative; 
    text-align: center; 
    background: rgba(0,0,0,0.3); 
    padding: 20px 20px; 
    margin: 2px; 
    border: darkgray 1px solid; 
    cursor: pointer; 
    box-sizing: border-box; 
} 

th { 
    white-space: nowrap; 
} 

.col-md-4{ 
    margin-bottom: 80px; 

} 

.fix{ 
    position: absolute; 
} 

.group{ 
    /*background: rgba(0,0,0,0.4);*/ 
} 
table th { 
    font-weight: bolder; 
    /*color:#49fb35;*/ 
} 

.small{ 
    width:20px; 
    height:20px; 
    background: rgba(0,0,0,0); 
    border: none; 
} 

Очень новые концепции CSS Пожалуйста, помогите

Answer 1

Каждой вещи происходит, как положено. вам необходимо указать класс «ящик» max-width 100%:
.box{max-width: 100%}.
, и если ваш колодец исходит из бутстрапа, возможно, вам нужно будет добавить! Important;

Но тогда у вас возникнут другие проблемы, связанные с повторной конструкцией стола, чтобы соответствовать новой ширине.

Answer 2

Как видно из кода, открытая правая сторона div должна быть равна 0 ее относительного родителя. Я бы сделал это с помощью javascript, просто добавив некоторый класс в каждый третий div строки, который находится в правой части, как показано ниже.

$('.mainDiv).each(function(index) { 
if(index%3==0){ 
    $(this).addClass('right-side'); 
} 
}); 

и стиль класса «правой стороне» должен быть установлен как

.right-side{ 
    right:0; 
}