크롬 브라우저가 아닌 경우 Flexbox가 올바르게 작동하지 않는 이유는 무엇입니까?

debugcn 에 게시 Dev

Denis535

나는 채팅을 쓰고있다. 모든 DOM 모듈을 하나의 HTML로 작성했을 때 Chrome에서는 제대로 작동했지만 Edge에서는 DOM 모듈이 작동하지 않았습니다. 하지만 모든 DOM 모듈을 다른 HTML 파일로 옮겼습니다. 이제 Edge에서 작동합니다. 그러나 이제 Flexbox는 모든 브라우저에서 작동하지 않습니다.

몇 가지 샘플을 작성했습니다.

하나의 HTML에있는 모든 DOM 모듈 : http://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview

다른 HTML의 DOM 모듈 : http://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview

이유는 모르겠지만 Chrome에서는 두 번째 샘플이 올바르게 작동하지만 전체 프로젝트에서는 Flexbox에 문제가 있습니다. 그러나 두 번째 샘플에는 Edge에서 동일한 문제가 있습니다. 두 번째 이미지를 참조하십시오.

Edge의 첫 번째 샘플 (DOM 모듈이로드되지 않음) :

Edge의 두 번째 샘플 ( "flex-basis : 0"및 "flex-grow : 1"은 작동하지 않음) :

Chrome의 올바른 결과 :

index.html :

<!DOCTYPE html>
<html>

  <head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="http://polygit.org/components/polymer/polymer.html" rel="import">

    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <div class='main-block'>
      <div class='title'>
        <span>Title</span>
      </div>

      <my-module></my-module>

    </div>

  </body>

</html>

<dom-module id="my-module">
  <template>
      <div class='messages'>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
      </div>
      <div class='title'>
        <span>Bottom</span>
      </div>
  </template>

  <script>
    Polymer({
            is: "my-module" 
    });
  </script>
</dom-module>

style.css :

.main-block
{
  display: flex;
  flex-direction: column;

  border: solid 1px red;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.title
{
  background-color: red;
  min-height: 50px;
  height: 50px;
  margin: 10px;
  text-align: center;
}

my-module
{
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;

  border: solid 1px green;
  margin: 10px;
}

.messages 
{
  flex-grow: 1;

  border: solid 1px blue;
  margin: 10px;

  overflow-x: hidden;
  overflow-y: auto;
}

.message
{
  background-color: pink;
  min-height: 50px;
  height: 50px;
  margin: 10px;
}

Denis535

작동하게하려면 "flex-basis : 0;"줄을 추가해야합니다. .messages 클래스로.

Polymer.js는 아무 관련이 없습니다. 이는 브라우저마다 Flexbox 동작이 다르기 때문입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

크롬 브라우저가 아닌 경우 Flexbox가 올바르게 작동하지 않는 이유는 무엇입니까?

크롬 브라우저가 아닌 경우 Flexbox가 올바르게 작동하지 않는 이유는 무엇입니까?

Google 크롬 브라우저에서 단축키가 작동하지 않는 이유는 무엇입니까?

브라우저가 Google 크롬이 아닌 경우에만 메시지 표시

브라우저가 아닌 adb로 작동하는 딥 링크

PEGjs가 / 올바르게 작동하지 않는 이유는 무엇입니까?

count (*)가 올바르게 작동하지 않는 이유는 무엇입니까?

flexbox 크로스 브라우저 문제 크롬이 올바르게 표시되지 않음

브라우저 크기가 조정될 때 SVG 경로가 이동하는 이유는 무엇입니까?

패턴 선택 자바 스크립트 크롬의 Mozilla 브라우저에서 작동하지 않는 이유는 무엇입니까?

Else가 올바르게 작동하지 않는 경우

내 bash 스크립트가 올바르게 CD가 아닌 이유는 무엇입니까?

이 경우 "=>"할당이 작동하지만 "="가 아닌 이유는 무엇입니까?

자바 스크립트 : 어떤 브라우저에서도 경고가 작동하지 않는 이유

크롬 브라우저가 좁아 질 때 navbar가 사라지는 문제를 해결하는 방법은 무엇입니까?

배경 이미지가 데스크톱 브라우저에서는 올바르게 표시되고 모바일 브라우저에서는 표시되지 않습니다.

이 코드가 작동하지 않는 이유는 무엇입니까? (내 아이폰 6, 크롬)

이 코드가 Chrome 브라우저에서 작동하지 않는 이유는 무엇입니까?

내 태그 도우미가 올바르게 해결되지 않는 이유는 무엇입니까?

브라우저가 프로토 타입 속성을 다르게 표시하는 이유는 무엇입니까?

CSS 전용 축소 메뉴는 웹킷 브라우저가 아닌 파이어 폭스에서만 작동합니다. 그 이유는 무엇입니까?

CSS 전용 축소 메뉴는 웹킷 브라우저가 아닌 파이어 폭스에서만 작동합니다. 그 이유는 무엇입니까?

기본 브라우저가 macOS에서 Swift를 사용하는 Safari가 아닌 경우에도 Safari에서 URL을 여는 방법은 무엇입니까?

내 코드가 동기화에서 올바르게 작동하지 않는 이유는 무엇입니까?

브라우저가 일부 CORS (crossorigin) 자바 스크립트 파일을 간헐적으로로드하지 않는 이유는 무엇입니까?

배경 이미지가 크롬에서 cssImageValue가 아닌 이유는 무엇입니까? 캔버스를 배경 이미지로 처리하지만 새 이미지를 만들지 않으려면 어떻게해야합니까?

전체 표현식이 참인 경우 자바 스크립트가 부울이 아닌 값을 출력하는 동작은 무엇입니까?

Google 크롬 브라우저가 제대로 작동하지 않습니다.

배경 이미지가 브라우저 크기 조정에 반응하지 않는 이유는 무엇입니까?

++가 올바르게 증가하지 않는 이유는 무엇입니까?

Sidekiq 4가 메일러에서 올바르게 작동하지 않는 이유는 무엇입니까?