1
votes

MS Edge ne parvient pas à rendre correctement la disposition flex imbriquée

Voici la mise en page qui montre le problème auquel j'ai été confronté, peut également être trouvée sur https: // jsfiddle. net / 51z7vt23 /

<div class="parent">
     <div class="container">
          <div class="container2">
               <div class="box">YES</div>
                <div class="txt">REALLY REALLLY REAAAAALLLY REAAAAALLLY REAAAAALLLY BEAUTIFULL TEXT, PERHAPS THE MOST BEAUTIFULL TEXT IN THE WORLD</div>
           </div>
           <div class="box">NO</div>
     </div>
</div>

.box {
     width: auto;
     height: 40px;
     border: 1px solid red;
     flex: 0 0 auto;
     position: relative;
}
.txt {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 18px;
     flex: 1 0 auto;
     width: 0px;
     position: relative;
}
.container {
     font-size: 16px;
     line-height: 3rem;
     box-sizing: border-box;
     position: relative;
     display: flex;
     padding: 0;
     margin: 0;
     max-width: 100%;
     text-align: start;
     flex: 0 0 auto;
      width: auto;
      height: auto;
}
.container2 {
      font-size: 16px;
      line-height: 3rem;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex: 1 0 auto;
      padding: 0;
      margin: 0;
      max-width: 100%;
      text-align: start;
      align-items: center;
      height: auto;           
}
.parent {
       width: 400px;
       border: 1px solid lime;
}

Ce code fonctionne correctement avec Chrome et fournit le résultat attendu: mais avec MS Edge, je peux voir que la case "NON" est poussée hors des limites du conteneur:

La version de MS Edge que j'utilise est 44.17763.771.0

Quelqu'un sait-il comment le faire fonctionner comme vous le souhaitez avec MS EDGE?

html css flexbox microsoft-edge

2 commentaires

max-width: 100%; sur cotainer2 est trop s'il doit partager le parent avec box (NO). jsfiddle.net/8f9suq7k fonctionne-t-il mieux?

@ G-Cyr vous pouvez poster votre code comme réponse. Je l'ai testé dans Edge et cela fonctionne bien.

3 Réponses :

0
votes

Je ne sais pas si vous avez remarqué, mais votre

NON

est en dehors du container2

https://jsfiddle.net/xu1sagy2/

<div class="parent">

    <div class="container">

        <div class="container2">

            <div class="box">YES</div>

            <div class="txt">REALLY REALLLY REAAAAALLLY REAAAAALLLY REAAAAALLLY BEAUTIFULL TEXT, PERHAPS THE MOST BEAUTIFULL TEXT IN THE WORLD</div>

            <div class="box">NO</div>

        </div>

    </div>

</div>

 .box {
     width: auto;
     height: 40px;
     border: 1px solid red;
     flex: 0 0 auto;
     position: relative;
}
 .txt {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 18px;
     flex: 1 0 auto;
     width: 0px;
     position: relative;
}
 .container {
     font-size: 16px;
     line-height: 3rem;
     box-sizing: border-box;
     position: relative;
     display: flex;
     padding: 0;
     margin: 0;
     max-width: 100%;
     text-align: start;
     flex: 0 0 auto;
     width: auto;
     height: auto;
}
 .container2{
     font-size: 16px;
     line-height: 3rem;
     box-sizing: border-box;
     position: relative;
     display: flex;
     flex: 1 0 auto;
     padding: 0;
     margin: 0;
     max-width: 100%;
     text-align: start;
     align-items: center;
     height: auto;
}
 .parent {
     width: 400px;
     border: 1px solid lime;
}

1 commentaires

Merci, c'est ainsi que le code original a été construit, je l'ai juste réduit à l'exemple reproductible minimal

0
votes

try

> .box { flex: 0 0 auto;
> -ms- flex: 0 0 auto; }
> 
> .txt { flex: 1 0 auto;
> -ms- flex: 1 0 auto; }
> 
> .container { flex: 0 0 auto;
> -ms- flex: 0 0 auto; }
> 
> .container2 { flex: 1 0 auto;
> -ms- flex: 1 0 auto; }

Notez que je n'ai pas tapé tout votre code css, juste concentré sur les sections "flex". La partie "-ms-" a fonctionné pour moi dans IE, veuillez l'essayer pour Edge.

1 commentaires

Pas testé en bord mais en ie11 et ça marche sans préfixe.

1
votes

Vous pouvez supprimer max-width: 100%; sur .container2 , ce qui est trop car la largeur doit être partagée avec un autre élément. Vous pouvez le transformer en min-width: 100%; + / ou overflow: hidden; comme une sorte de redistribution / recalcul de sa taille.

démo ci-dessous

<div class="parent">
  <div class="container">
    <div class="container2">
      <div class="box">YES</div>
      <div class="txt">REALLY REALLLY REAAAAALLLY REAAAAALLLY REAAAAALLLY BEAUTIFULL TEXT, PERHAPS THE MOST BEAUTIFULL TEXT IN THE WORLD</div>
    </div>
    <div class="box">NO</div>
  </div>
</div>

.box {
  width: auto;
  height: 40px;
  border: 1px solid red;
  flex: 0 0 auto;
  position: relative;
}

.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  flex: 1 0 auto;
  width: 0px;
  position: relative;
}

.container {
  font-size: 16px;
  line-height: 3rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
  padding: 0;
  margin: 0;
  max-width: 100%;
  text-align: start;
  flex: 0 0 auto;
  width: auto;
  height: auto;
}

.container2 {
  font-size: 16px;
  line-height: 3rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
  text-align: start;
  align-items: center;
  height: auto;
  min-width: 0;
  overflow: hidden;
}

.parent {
  width: 400px;
  border: 1px solid lime;
}

a fourché https://jsfiddle.net/8f9suq7k/

0 commentaires