MS Edge не может правильно отобразить вложенный гибкий макет - PullRequest
Новая
       27

MS Edge не может правильно отобразить вложенный гибкий макет

1 голос
/ 28 октября 2019

Вот макет, который показывает проблему, с которой я столкнулся, также можно найти по адресу https://jsfiddle.net/51z7vt23/

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

Этот код отлично работает с Chrome и обеспечивает ожидаемый результат: enter image description here, но с MS Edge я вижу, что "НЕТ"окно выталкивается за пределы контейнера: enter image description here

Используемая версия MS Edge - 44.17763.771.0

Кто-нибудь знает, как заставить это работатьпо желанию с MS EDGE?

Ответы [ 3 ]

1 голос
/ 29 октября 2019

Вы можете удалить max-width:100%; на .container2, что слишком много, поскольку ширина должна использоваться совместно с другим элементом. Вы можете превратить его в min-width:100%; + / или overflow:hidden; как своего рода перекомпоновку / пересчет его размера.

демо ниже 

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

раздвоенный https://jsfiddle.net/8f9suq7k/

0 голосов
/ 28 октября 2019

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; }

Обратите внимание, что я не набрал весь ваш код CSS, просто сосредоточился на разделах "flex". Часть "-ms-" сработала для меня в IE, пожалуйста, попробуйте ее для Edge.

0 голосов
/ 28 октября 2019

Не знаю, заметили ли вы, но ваш <div class="box">NO</div> находится за пределами container2

https://jsfiddle.net/xu1sagy2/

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