textarea flex-item内で最大幅が機能しない

textareaを含むmax-width: 100%を使用しています。しかし、フレックスアイテムの内部では動作しないようです。 maxが尊重されることを保証するためにtextareaで指定できるプロパティはありますか？ flexboxesからのtextarea flex-item内で最大幅が機能しない

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

See codepen. Flexのクラス。

出典

2017-10-04 ryanve

フレックスアイテムは、デフォルトでコンテンツの幅より小さくすることはできません。フレックスアイテムの初期設定は 'min-width：auto'です。したがって、4000列の 'textarea'はflex項目を展開しています。デフォルトを上書きします。アイテムに 'min-width：0'を追加してください。 [**改訂codepen **]（https://codepen.io/anon/pen/zEPQWY） –

'.flex-initial {max-width：100％;}'を実行すると、問題も同様に解決されます。 – Jonathan

コード領域でテキスト領域が4,000列になるように指定します。これが問題の原因です。

フレンドはフレックスコンテナなので、子要素に合わせて拡張されます。

最も簡単な修正は以下のとおりです。

はpx、vw、またはあなたのTextAreaの別の適切な単位での最大幅を設定します。
利用代わりに代わりmax-widthのwidth、親コンテナのmax-widthを指定し、
オーバーライド親要素のデフォルトmin-width: auto、すなわち、他の値に0、または250それを設定
はに列を減らします250のようなより合理的なもの - または省略してwidthを使用してください。

出典

2017-10-04 22:23:44 Bricky

textarea flex-item内で最大幅が機能しない

答えて

関連する問題