La altura div del niño supera la altura del padre flexible en Firefox pero no Chrome

Question

Sep 24, 2018, 11:41 PM

firefox css twitter-bootstrap css3 flexbox

La altura div del niño supera la altura del padre flexible en Firefox pero no Chrome

¿Cómo puedo evitar un div hijo con barras de desplazamiento yflex:1 por exceder la altura de su flexbox padre en Firefox? Funciona correctamente en Chrome.

nlace @CodePen (si lo prefiere a fragmentos de desbordamiento de pila):https: //codepen.io/garyapps/pen/ZMNVJ

Detalles:

Tengo un contenedor flexible de altura fija. Tiene unflex-direction:column setting, y contiene múltiples div childen que se apilarán verticalmente. Uno de los divs secundarios recibe unaflex:1 propiedad, mientras que otros reciben alturas fijas.

Mi expectativa es que el niño div con laflex:1a propiedad @ se expandirá para llenar el espacio vertical restante. Esto funciona como se esperaba.

También le he dado al niño div unoverflow-y:scroll propiedad, de modo que si el contenido dentro de él excede su altura, aparecen barras de desplazamiento. Esto funciona bien en Chrome. Sin embargo, en Firefox, la altura de este niño aumenta, excediendo su div padre.

En Chrome:

En Firefox:

Como puede ver en la captura de pantalla, tengo dos casos de este problema, uno en el panel de la izquierda y el otro en el panel de la derecha. En Chrome, la altura del elemento secundario permanece constante, aparecen barras de desplazamiento y no se supera la altura del elemento primario. En Firefox, las barras de desplazamiento no aparecen, y la altura del elemento secundario aumenta y excede a su elemento primario.

He analizado algunas otras preguntas similares sobre SO y, en muchos casos, configuré unamin-height:0a propiedad @ resolvió el problema en Firefox. Sin embargo, he intentado agregarmin-height:0 a padres, hijos, padres e hijos, y no tuve suerte.

Ejecute el fragmento de código a continuación en Chrome y Firefox para ver la diferencia en los dos navegadores.

Agradecería cualquier consejo sobre cómo evitar que crezca la división infantil.

(Tenga en cuenta que se está utilizando Bootstrap 4. El fragmento de código hace referencia al CDN del archivo bootstrap 4

Fragmento de códig:

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