Không thể cuộn đến đầu mục linh hoạt đang tràn vùng chứa

290
jejacks0n 2015-11-01 07:35.

Vì vậy, khi cố gắng tạo ra một phương thức hữu ích bằng cách sử dụng flexbox, tôi nhận thấy điều gì có vẻ là một vấn đề của trình duyệt và đang tự hỏi liệu có một bản sửa lỗi hoặc cách giải quyết đã biết - hoặc các ý tưởng về cách giải quyết nó.

Điều tôi đang cố gắng giải quyết, có hai khía cạnh. Đầu tiên, lấy cửa sổ phương thức căn giữa theo chiều dọc, hoạt động như mong đợi. Thứ hai là làm cho cửa sổ phương thức cuộn - bên ngoài, vì vậy toàn bộ cửa sổ phương thức sẽ cuộn chứ không phải nội dung bên trong nó (điều này giúp bạn có thể có menu thả xuống và các phần tử giao diện người dùng khác có thể mở rộng ra bên ngoài giới hạn của phương thức - như công cụ chọn ngày tùy chỉnh, v.v.)

Tuy nhiên, khi kết hợp căn giữa theo chiều dọc với các thanh cuộn, phần trên của phương thức có thể trở nên không truy cập được vì nó bắt đầu tràn. Trong ví dụ trên, bạn có thể thay đổi kích thước để buộc tràn và làm như vậy, nó cho phép bạn cuộn xuống dưới cùng của phương thức, nhưng không phải lên trên cùng (đoạn đầu tiên bị cắt).

Đây là liên kết đến mã mẫu (được đơn giản hóa cao)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

Hiệu ứng này (hiện tại) Firefox, Safari, Chrome và Opera .. Thật thú vị, nó hoạt động chính xác trong IE10 nếu bạn nhận xét trong css có tiền tố của nhà cung cấp IE10 - Tôi chưa bận tâm thử nghiệm trong IE11, nhưng giả sử hành vi này khớp với hành vi của IE10 .

Bất kỳ ý tưởng sẽ là tốt. Liên kết đến các vấn đề đã biết hoặc lý do đằng sau hành vi này cũng sẽ hữu ích.

7 answers

554
Michael Benjamin 2015-11-01 08:51.

Vấn đề

Flexbox giúp căn giữa rất dễ dàng.

Chỉ cần áp dụng align-items: centerjustify-content: centervào vùng chứa flex, (các) mục flex của bạn sẽ được căn giữa theo chiều dọc và chiều ngang.

Tuy nhiên, có một vấn đề với phương pháp này khi vật phẩm flex lớn hơn vật chứa flex.

Như đã lưu ý trong câu hỏi, khi mục flex tràn ra vùng chứa, phần trên sẽ không thể truy cập được.

Đối với phần tràn theo chiều ngang, phần bên trái sẽ không thể truy cập được (hoặc phần bên phải, bằng các ngôn ngữ RTL).

Đây là một ví dụ với một vùng chứa LTR có justify-content: centervà ba mục linh hoạt:

Xem phần dưới cùng của câu trả lời này để biết giải thích về hành vi này.


Giải pháp số 1

Để khắc phục sự cố này, hãy sử dụng lề tự động flexbox thay vì justify-content.

Với autolề, một mục flex tràn có thể được căn giữa theo chiều dọc và chiều ngang mà không mất quyền truy cập vào bất kỳ phần nào của nó.

Vì vậy, thay vì mã này trên vùng chứa linh hoạt:

#flex-container {
    align-items: center;
    justify-content: center;
}

Sử dụng mã này trên mặt hàng linh hoạt:

.flex-item {
    margin: auto;
}

Bản trình diễn sửa đổi


Giải pháp số 2 (chưa được triển khai trong hầu hết các trình duyệt)

Thêm safegiá trị vào quy tắc căn chỉnh từ khóa của bạn, như sau:

justify-content: safe center

hoặc là

align-self: safe center

Từ thông số kỹ thuật của Mô-đun Căn chỉnh Hộp CSS :

4.4. Overflow Alignment: các safeunsafecác từ khóa và giới hạn an toàn cuộn

Khi [flex item] lớn hơn [flex container], nó sẽ bị tràn. Một số chế độ căn chỉnh, nếu được sử dụng trong trường hợp này, có thể gây mất dữ liệu: ví dụ: nếu nội dung của thanh bên được căn giữa, khi chúng bị tràn, chúng có thể gửi một phần các hộp của chúng qua mép bắt đầu của chế độ xem, không thể cuộn đến .

Để kiểm soát tình trạng này, chế độ căn chỉnh tràn có thể được chỉ định rõ ràng. Unsafecăn chỉnh tôn vinh chế độ căn chỉnh được chỉ định trong các tình huống tràn, ngay cả khi nó gây mất dữ liệu, trong khi safecăn chỉnh thay đổi chế độ căn chỉnh trong các tình huống tràn nhằm cố gắng tránh mất dữ liệu.

Hành vi mặc định là chứa chủ đề căn chỉnh trong vùng có thể cuộn, mặc dù tại thời điểm viết bài, tính năng an toàn này chưa được triển khai.

safe

Nếu kích thước của [flex item] tràn [flex container], [flex item] sẽ được căn chỉnh thay thế như thể chế độ căn chỉnh là [ flex-start].

unsafe

Bất kể kích thước tương đối của [mục linh hoạt] và [thùng chứa linh hoạt], giá trị căn chỉnh đã cho sẽ được chấp nhận.

Lưu ý: Mô-đun Căn chỉnh Hộp được sử dụng trên nhiều mô hình bố trí hộp, không chỉ linh hoạt. Vì vậy, trong đoạn trích thông số kỹ thuật ở trên, các thuật ngữ trong ngoặc thực sự nói "chủ đề căn chỉnh", "vùng chứa căn chỉnh" và " start". Tôi đã sử dụng các thuật ngữ linh hoạt cụ thể để tập trung vào vấn đề cụ thể này.


Giải thích cho giới hạn cuộn từ MDN:

Cân nhắc mục linh hoạt

Các thuộc tính căn chỉnh của Flexbox thực hiện căn giữa "đúng", không giống như các phương pháp căn giữa khác trong CSS. Điều này có nghĩa là các mục flex sẽ ở giữa, ngay cả khi chúng làm tràn vùng chứa flex.

Tuy nhiên, điều này đôi khi có thể có vấn đề, nếu chúng tràn qua mép trên của trang hoặc mép trái [...], vì bạn không thể cuộn đến vùng đó, ngay cả khi có nội dung ở đó!

Trong bản phát hành trong tương lai, các thuộc tính căn chỉnh cũng sẽ được mở rộng để có tùy chọn "an toàn".

Hiện tại, nếu đây là một vấn đề đáng lo ngại, thay vào đó bạn có thể sử dụng các lề để đạt được căn giữa, vì chúng sẽ phản hồi theo cách "an toàn" và ngừng căn giữa nếu chúng bị tràn.

Thay vì sử dụng các align-thuộc tính, chỉ cần đặt autolề trên các mục linh hoạt mà bạn muốn căn giữa.

Thay vì các justify-thuộc tính, hãy đặt lề tự động ở các cạnh bên ngoài của mục linh hoạt đầu tiên và cuối cùng trong vùng chứa linh hoạt.

Các autolề sẽ "linh hoạt" và giả sử không gian còn lại, căn giữa các mục linh hoạt khi còn dư không gian và chuyển sang căn chỉnh bình thường khi không.

Tuy nhiên, nếu bạn đang cố gắng thay thế justify-contentbằng cách căn giữa dựa trên lề trong một hộp flexbox nhiều dòng, có lẽ bạn đã gặp may, vì bạn cần đặt lề ở mục flex đầu tiên và cuối cùng trên mỗi dòng. Trừ khi bạn có thể dự đoán trước những mục nào sẽ kết thúc trên dòng nào, bạn không thể sử dụng căn giữa dựa trên ký quỹ trong trục chính để thay thế thuộc justify-contenttính một cách đáng tin cậy .

22
jejacks0n 2015-11-01 07:51.

Vâng, như Định luật Murphy sẽ có nó, việc đọc tôi thực hiện sau khi đăng câu hỏi này đã dẫn đến một vài kết quả - không được giải quyết hoàn toàn, nhưng dù sao cũng có phần hữu ích.

Tôi đã thử nghiệm với chiều cao tối thiểu một chút trước khi đăng, nhưng không biết về các ràng buộc kích thước nội tại khá mới đối với thông số kỹ thuật.

http://caniuse.com/#feat=intriuality-width

Thêm một min-height: min-contentvào khu vực flexbox không giải quyết được sự cố trong Chrome và với các tiền tố của nhà cung cấp cũng khắc phục được Opera và Safari, mặc dù Firefox vẫn chưa được giải quyết.

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

Vẫn đang tìm kiếm ý tưởng trên Firefox và các giải pháp tiềm năng khác.

19
colinbr96 2017-12-12 09:53.

Tôi đã cố gắng thực hiện điều này chỉ với 3 thùng chứa. Bí quyết là tách vùng chứa flexbox khỏi vùng chứa điều khiển việc cuộn. Cuối cùng, đặt mọi thứ vào một vùng chứa gốc để tập trung tất cả. Dưới đây là các phong cách thiết yếu để tạo hiệu ứng:

CSS:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML:

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

Tôi đã tạo bản demo ở đây: https://jsfiddle.net/r5jxtgba/14/

4
mpen 2016-09-16 13:04.

Tôi nghĩ rằng tôi đã tìm thấy một giải pháp. Nó hoạt động với nhiều văn bảnmột ít văn bản . Bạn không cần chỉ định chiều rộng của bất kỳ thứ gì và nó sẽ hoạt động trong IE8.

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}
<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

1
Chris Talman 2017-12-05 03:52.

Theo MDN, safegiá trị hiện có thể được cung cấp cho các thuộc tính như align-itemsjustify-content. Nó được mô tả như sau:

Nếu kích thước của mục vượt quá vùng chứa căn chỉnh, thay vào đó, mục sẽ được căn chỉnh như thể ở chế độ căn chỉnh start.

Vì vậy, nó có thể được sử dụng như sau.

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

Tuy nhiên, không rõ mức độ hỗ trợ của trình duyệt, tôi không thể tìm thấy bất kỳ ví dụ nào về việc sử dụng nó và bản thân tôi cũng gặp một số vấn đề với nó. Đề cập đến nó ở đây để thu hút nhiều sự chú ý hơn.

0
Nadeesh Peiris 2018-10-04 22:38.

Tôi cũng đã quản lý để làm điều đó bằng cách sử dụng thêm vùng chứa

HTML

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>  
</div>

CSS

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

trong jsfiddle> https://jsfiddle.net/Nash171/cpf4weq5/

thay đổi giá trị chiều rộng / chiều cao .content và xem

0
Silverandrew 2019-03-17 12:45.

2 Phương pháp uốn cong thùng chứa với dự phòng bảng được thử nghiệm IE8-9, flex hoạt động trong IE10,11. Chỉnh sửa: Đã chỉnh sửa để đảm bảo căn giữa theo chiều dọc khi nội dung tối thiểu, bổ sung hỗ trợ kế thừa.

Vấn đề bắt nguồn từ việc chiều cao được thừa hưởng từ kích thước khung nhìn khiến trẻ em bị tràn, như Michael đã trả lời. https://stackoverflow.com/a/33455342/3500688

một cái gì đó đơn giản hơn và sử dụng flex để duy trì bố cục trong vùng chứa cửa sổ bật lên (nội dung):

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
		<!--[if lt IE 10]>
<style>
	  #popup {
			display: table;
			width:100%;
		}
		.iewrapper {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<![endif]-->
<div id="popup">
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
    <div class="container">
        <p class="p3">Test</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Thời gian, sự kiên nhẫn, thời gian, sự cống hiến và thời gian chỉ là một vài trong số những thứ mà Peter Bellerby cần để thành lập và sau đó điều hành Bellerby & Co. Globemakers, một trong những công ty duy nhất trên Trái đất vẫn sản xuất các quả địa cầu bằng tay.

Năm giai đoạn đau buồn sau khi mất việc làm

Năm giai đoạn đau buồn sau khi mất việc làm

Đó là một ngày thứ Bảy, máy bay của tôi hạ cánh, và tôi đã sẵn sàng để thư giãn trong một kỳ nghỉ cuối tuần ngắn ngủi, khi một email đến trên điện thoại của tôi. Tôi đã mất việc.

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Nếu bạn đã từng bị đánh cắp danh tính của mình, bạn biết đó là một trải nghiệm đáng sợ và căng thẳng. Một cách không phổ biến để ngăn chặn nó? Tín dụng bị đóng băng.

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Eleanor (Kristen Bell) dường như đã tình nguyện cho chúng tôi làm vật tưởng nhớ. NBC's The Good Place là một chương trình thích thử thách tốt.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language