A altura div da criança excede a altura pai flexível no Firefox, mas não no Chrome

Question

Sep 24, 2018, 11:41 PM

firefox css twitter-bootstrap css3 flexbox

A altura div da criança excede a altura pai flexível no Firefox, mas não no Chrome

Como impedir que uma criança div com barras de rolagem eflex:1 exceder a altura do seu flexbox pai no Firefox? Funciona corretamente no Chrome.

Link CodePen (se você preferir os snippets de estouro de pilha):https://codepen.io/garyapps/pen/ZMNVJg

Detalhes:

Eu tenho um contêiner flexível de altura fixa. Tem umflex-direction:column configuração e contém várias divs childen que serão empilhadas verticalmente. Um dos divs filhos recebe umflex:1 enquanto outros recebem alturas fixas.

Minha expectativa é que a criança div com oflex:1 A propriedade será expandida para preencher o espaço vertical restante. Isso funciona conforme o esperado.

Eu também dei à criança div umoverflow-y:scroll propriedade, de modo que, se o conteúdo dentro dela exceder sua altura, as barras de rolagem serão exibidas. Isso funciona bem no Chrome. No Firefox, no entanto, a altura desta criança aumenta, excedendo sua div principal.

No Chrome:

No Firefox:

Como você pode ver na captura de tela, tenho duas ocorrências desse problema, uma no painel à esquerda e a outra no painel à direita. No Chrome, a altura da div filho permanece constante, as barras de rolagem aparecem e a altura do pai não é excedida. No Firefox, as barras de rolagem não aparecem e a altura do div filho aumenta e excede seu pai.

Analisei algumas outras perguntas semelhantes sobre SO e, em muitos casos, definimin-height:0 A propriedade resolveu o problema no Firefox. No entanto, tentei adicionarmin-height:0 para pais, filhos, pais e filhos, e não tiveram sorte.

Execute o snippet de código abaixo no Chrome e no Firefox para ver a diferença nos dois navegadores.

Eu gostaria de receber algum conselho sobre como impedir que a divisão de crianças cresça.

(Observe que o Bootstrap 4 está sendo usado. O snippet de código faz referência ao CDN do arquivo .css do bootstrap 4)

Fragmento de código:

.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>

leaveComments