我有4個flexbox列，一切都很好，但是當我向一個列添加一些文本并將其設置為大字體時，由于flex屬性，它使該列比它應有的寬度更寬。

我嘗試使用word-break: break-word，這很有幫助，但是當我將列的寬度調(diào)整到非常小的時候，文本中的字母被分成多行(每行一個字母)，但是列的寬度并沒有小于一個字母的大小。

觀看此視頻 (開始時，第一列是最小的，但當我調(diào)整窗口大小時，它是最寬的一列。我只想永遠尊重flex設置；柔性尺寸1 : 3 : 4 : 4)

我知道，將字體大小和列填充設置得更小會有所幫助...但是還有其他的解決方法嗎？

我不能使用溢出-x:隱藏。

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

您遇到了flexbox默認設置。

伸縮項目不能小于其內(nèi)容在主軸上的大小。

默認值為...

最小寬度:自動 最小高度:自動 ...分別用于行方向和列方向的彈性項目。

您可以通過將彈性項目設置為以下值來覆蓋這些默認值:

最小寬度:0 最小高度:0 溢出:隱藏(或任何其他值，除了可見) Flexbox規(guī)格 4.5.Flex的自動最小尺寸 項目

為了給彈性項目提供一個更合理的默認最小尺寸，這個 規(guī)范引入了一個新的自動值作為 CSS 2.1中定義的最小寬度和最小高度屬性。

關(guān)于自動價值...

在溢出在主軸中可見的伸縮項目上，當在伸縮項目的主軸最小尺寸屬性上指定時，指定自動最小尺寸。否則計算結(jié)果為0。

換句話說:

最小寬度:自動和最小高度:自動默認值僅在溢出可見時適用。 如果溢出值不可見，則min-size屬性的值為0。 因此，溢出:隱藏可以替代最小寬度:0和最小高度:0。 和...

最小尺寸算法僅適用于主軸。 例如，默認情況下，行方向容器中的flex項不會獲得min-height: auto。 關(guān)于更詳細的解釋，請看這篇文章: 在伸縮方向:行和伸縮方向:列中最小寬度呈現(xiàn)不同 你已經(jīng)應用了最小寬度:0，項目仍然沒有縮小？ 嵌套Flex容器

如果您在HTML結(jié)構(gòu)的多個級別上處理flex項目，可能有必要在更高級別上覆蓋默認的最小寬度:自動/最小高度:自動。

基本上，具有min-width: auto的較高級別的flex項目可以防止嵌套在min-width: 0下面的項目收縮。

示例:

彈性項目不會縮小到小于其內(nèi)容 讓孩子適應父母 空白css屬性給flex帶來了問題 瀏覽器渲染注釋 Chrome與Firefox / Edge

至少從2017年開始，Chrome似乎要么(1)恢復到最小寬度:0 /最小高度:0默認值，要么(2)根據(jù)一種神秘的算法在某些情況下自動應用0默認值。(這可能就是他們所說的干預。)因此，許多人看到他們的布局(尤其是期望的滾動條)在Chrome中可以正常工作，但在Firefox / Edge中卻不行。這個問題在這里有更詳細的介紹:Firefox和Chrome之間的伸縮差異

IE11

如規(guī)范中所述，最小寬度和最小高度屬性的自動值是“新的”。這意味著一些瀏覽器可能仍然默認呈現(xiàn)0值，因為它們在值被更新之前實現(xiàn)了flex布局，并且因為0是CSS 2.1中最小寬度和最小高度的初始值。IE11就是這樣一種瀏覽器。其他瀏覽器已經(jīng)更新到flexbox規(guī)范中定義的較新的自動值。

修訂版演示

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

我發(fā)現(xiàn)這些年來flex和grid一直困擾著我，所以我打算提出以下建議:

* { min-width: 0; min-height: 0; }

然后只需使用最小寬度:自動或最小高度:自動，如果你需要的行為。

事實上，為了使所有布局更加合理，還要考慮框的大小:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有人知道會有什么奇怪的后果嗎？幾年來，我沒有遇到任何混合使用上述方法的情況。事實上，我想不出有哪種情況下我希望從內(nèi)容向外布局到flex/grid，而不是從flex/grid向內(nèi)布局到內(nèi)容——當然，如果它們存在，也很少。所以這感覺像是一個糟糕的違約。但也許我錯過了什么？

對你的問題的答案是，默認情況下，瀏覽器傾向于向讀者顯示盡可能多的信息(而不是隱藏任何東西)。

這是默認情況下發(fā)生的，甚至包括在白色背景上顯示默認的黑色字體(為了最大的頁面對比度和可讀性)，在內(nèi)容大于視口高度(或?qū)挾?的地方添加滾動條，或者仍然顯示來自標記(或背景顏色)的內(nèi)容，即使這被錯誤地放置在& lt/body & gt；或者甚至& lt/html & gt；html文件中的。

在CSS的上下文中，這同樣適用，但是您也可以在此基礎上進行許多自定義。

即使在屏幕上使用大字體(如:50em)這最初充當溢出元素(并通過使用display: flex將字體放入靈活的子容器中)不會改變這種默認行為，除非您使用overflow: hidden或以某種方式調(diào)整元素的大小。

一個優(yōu)雅的解決方案是使用動態(tài)調(diào)整字母大小，例如

字體大小:calc(0.5 em+2ww)

這甚至在響應場景中也能很好地工作。

正如前面的回答所提到的，flex項目不能小于其內(nèi)容在主軸上的大小(出于同樣的原因，這不僅是特定于在CSS中實現(xiàn)的flexbox模型，也是因為內(nèi)部瀏覽器的工作方式)。即使是一個長單詞，如果它比顯示寬度長，也會顯示滾動條，就好像是一個固定大小的塊類型元素。

這在舊的html 4.01規(guī)范中被稱為

"按照慣例，visual HTML用戶代理將文本行換行以適應 可用的邊距。包裝算法取決于腳本 格式化。

例如，在西文腳本中，文本只能以白色換行 空間。"

如第9.5.3段所示。這意味著，從那時起，默認情況下文本必須連續(xù)顯示(除非我們決定分割它，但不是在單個字符級別:一個120em大小的單個非白色字符將觸發(fā)瀏覽器上的滾動條顯示)。

第9.1段中的詞語也有明確定義，出處同上:

我們使用術(shù)語& quotword & quot這里的意思是& quot非空白序列 字符& quot

顯示任何單詞的原始格式的目的是為了不破壞、隱藏或歪曲原始信息、代碼作者的意思或意圖。因此，我們也有& ampnbsp用于將兩個相連的單詞保持在同一行——當斷開它們時可能會造成混亂(例如紐約，晚上10點，10公里/小時，10點等)

對于下面的代碼，添加寬度:100%解決了我的問題。

.post-cover .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    word-break: break-all;
    z-index: 21;
}
.post-cover .article-page {
    padding: 20px 0;
    margin-bottom: 40px;
    font-size: 0.875em;
    line-height: 2.0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;   /* Add this */
}

我嘗試了所有的方法，甚至把下面的代碼放到了index.css中。

* {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

但是什么都沒用。

最后，我制作了我想要縮小的div，它的內(nèi)容是有位置:absolute。然后就開始萎縮了。 它的父div需要定義高度和寬度。這可能不是每個場景的最佳解決方案，但如果這對你有用，那就好！