Вот результат:

Question

Sep 24, 2018, 11:41 PM

css css3 twitter-bootstrap firefox flexbox

Вот результат:

могу предотвратить дочерний div с полосами прокрутки иflex:1 превышать высоту своего родительского flexbox в Firefox? Он работает правильно в Chrome.

Ссылка на CodePen (если вы предпочитаете использовать фрагменты переполнения стека):https://codepen.io/garyapps/pen/ZMNVJg

подробности:

У меня есть гибкий контейнер фиксированной высоты. Оно имеетflex-direction:column параметр, и он содержит несколько детских div, которые будут сложены вертикально. Один из дочерних элементов получаетflex:1 собственности, в то время как другим даны фиксированные высоты.

Я ожидаю, что ребенок div сflex:1 свойство будет расширяться, чтобы заполнить оставшееся вертикальное пространство. Это работает как ожидалось.

Я также дал ребенкуoverflow-y:scroll свойство, так что если содержимое внутри него превышает его высоту, появляются полосы прокрутки. Это прекрасно работает в Chrome. Однако в Firefox рост этого ребенка увеличивается, превышая его родительский div.

В Chrome:

В Firefox:

Как вы видите на скриншоте, у меня есть два случая этой проблемы: одна на панели слева, а другая на панели справа. В Chrome высота дочернего элемента div остается постоянной, появляются полосы прокрутки, а высота родительского элемента не превышается. В Firefox полосы прокрутки не отображаются, а высота дочернего элемента div увеличивается и превышает его родительский элемент.

Я рассмотрел несколько других подобных вопросов по SO, и во многих случаяхmin-height:0 свойство решило проблему в Firefox. Однако я попытался добавитьmin-height:0 для родителей, детей, как родителей, так и детей, и не повезло.

Запустите приведенный ниже фрагмент кода в Chrome и Firefox, чтобы увидеть разницу в двух браузерах.

Буду признателен за любые советы о том, как предотвратить рост ребенка div.

(Обратите внимание, что используется Bootstrap 4. Фрагмент кода ссылается на CDN файла начальной загрузки 4 .css)

Фрагмент кода:

.body-content {
        height: 300px;   
        max-height:100%;
        border: 3px dashed purple;
        display:flex;                       
        flex-direction: column;             
    }


#messagescontainerrow {
        flex: 1;
        border: 5px double black;
    }

#leftdiv {
        display:flex;
        flex-direction:column;
        border: 1px solid green;
    }

#messagetools {
        height: 50px;
        background-color: cornsilk;
    }

#messagelist {
        flex:1;     
        overflow-y: scroll;   
        background-color:whitesmoke;
    }

#rightdiv {
        display:flex;
        flex-direction:column;
        border: 1px solid blue;
    }

#messagesenderspane {
        width: 100%;
        height: 50px;
        background-color: lemonchiffon
    }

#messagecontents {
        flex: 1;
        overflow-y: scroll; 
        width: 100%;
        border: 1px solid blue;
        background-color: aliceblue;
    }

#messagesend {
        width: 100%;
        height: 70px;
        background-color: whitesmoke;
    }

<html>
  <head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="container body-content">
      <div class="row" id="messagescontainerrow">

        <div class="col-5" id="leftdiv">
            <div id="messagetools">
                <input type="button" id="newbutton" value="My Button" />
            </div>
            <div id="messagelist">
              <h4>Chat 1</h4>
              <h4>Chat 2</h4>
              <h4>Chat 3</h4>
              <h4>Chat 4</h4>
              <h4>Chat 5</h4>
              <h4>Chat 6</h4>
              <h4>Chat 7</h4>
              <h4>Chat 8</h4>
            </div>
        </div>


        <div class="col-7" id="rightdiv">
            <div id="messagesenderspane">
              Chat 3
            </div>
            <div id="messagecontents">
              <h4>line 1</h4>
              <h4>line 2</h4>
              <h4>line 3</h4>
              <h4>line 4</h4>
              <h4>line 5</h4>
              <h4>line 6</h4>
              <h4>line 7</h4>
            </div>
            <div id="messagesend">
                <textarea id="sendbox"></textarea>
                <input type="button" id="sendbutton" value="Send" />
            </div>
        </div>



      </div>
    </div>
  </body>
</html>

Комментировать

Вот результат:

Ответы на вопрос(2)

Ваш ответ на вопрос

Популярные вопросы