Исправьте размер <Pre> и сделайте прокрутку в HTML

Question

Я использовал

, чтобы показать мои данные JSON в Модал. Но 
 стал другого размера в зависимости от размера json. Я хочу исправить высоту 
. Если json больше, он будет отображаться при прокрутке.
Вот мой модал.
<div class="modal-content json-modal-body" id="full-width" ng-controller="projectdetailsController">

    <div class="modal-header modal-header-confirm">
        <h4 class="modal-title ng-binding">
            <span class="glyphicon glyphicon-indent-left"></span>{{modalOptions.headerText}}
        </h4>
    </div>

    <div class="modal-body"> 

         <pre ng-bind-html="json | prettifyFilter"></pre>

    </div>

</div>
Когда JSON пуст. Становится так 
Как я могу это сделать?
                                    
                                
                            

Answer 1

Попробуй это:

<style>
 div.scroll {
    width: 100px;
    height: 100px;
    overflow: scroll;
 }
</style>

Видишь, если это решит твою проблему.

Answer 2

Вы можете установить ширину, высоту и заставить его всегда показывать свиток

  .modal-body pre {
    height: 200px;/*something like 90% would work too if parent's height is specified*/
    width: 300px;
    word-wrap: break-word;/*if you want to prevent horizontal scrolling and wrap text instead*/
    overflow: scroll;/*forces scroll to always show; if overflow: auto scroll will be visible only if needed*/
  }