textarea最大寬度不能在柔性項目內工作

我正在使用max-width: 100%包含textarea。但它似乎並不適用於Flex項目。有沒有我可以在textarea上指定的屬性來確保最大值將被尊重？textarea最大寬度不能在柔性項目內工作

textarea { 
    display: block; 
    margin-bottom: 1em; 
    max-width: 100%; 
    box-sizing: border-box; 
    overflow: auto; 
}

See codepen. Flex類從flexboxes。

來源

2017-10-04 ryanve

默認情況下，Flex項目的長度不能小於其內容的寬度。 Flex項目的初始設置是'min-width：auto'。因此，你的'textarea' 4000列正在擴展flex項目。覆蓋默認值。將'min-width：0'添加到該項目。 [** modified codepen **]（https://codepen.io/anon/pen/zEPQWY） –

做'.flex-initial {max-width：100％;}'也解決了這個問題。 – Jonathan

您指定文本區域應該是在codepen中4000列寬，這是什麼導致問題。

由於父級是一個彈性容器，它將會增長以容納子元素。

最簡單的修復是：

設置最大寬度px，vw，或爲您的textarea另一個合適的單位。
使用width代替max-width，並指定父容器上的max-width，代替
覆蓋父元素的默認min-width: auto，其設置爲任何其他值，即0，或250
降低列更合理的東西，如250 - 或者省略它們並使用width而不是

來源

2017-10-04 22:23:44 Bricky

textarea最大寬度不能在柔性項目內工作

回答

相關問題