フレックスボックス CSS を使用してこのようなことを実現したいと考えています。メニューは固定幅ですが、テーブルは自動的に拡大する可能性があり、ヘッダーは長い場合でもテーブルの幅を超えてはなりません。言い換えれば、テーブルは列コンテナーを拡張できる必要がありますが、ヘッダーは拡張できません。
1 つのフレックス列だけで簡単に実装できます。
しかし、メニューを追加すると、すべてが正常ではなくなり、タイトルが切り詰められません。
タイトルを含む要素のサイズを、その兄弟要素とともに変更しますが、その要素自体の子要素には影響を与えないようにしたいとします。
私が考える唯一の方法は、タイトル テキストを適切な要素 (この場合は <span>) で囲み、それから position:Absolute を使用してそれを削除することです。 from フローから取り出して、タイトルの親要素で position:relative を使用します。次に、タイトルの高さを設定する必要があります。
<span>
position:Absolute
position:relative
に置き換えました。これにより、メニューのサイズが変更されなくなり、常に 200px のままになります。
リーリー リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
タイトルを含む要素のサイズを、その兄弟要素とともに変更しますが、その要素自体の子要素には影響を与えないようにしたいとします。
私が考える唯一の方法は、タイトル テキストを適切な要素 (この場合は
＃＃＃例＃＃＃<span>) で囲み、それからposition:Absoluteを使用してそれを削除することです。 from フローから取り出して、タイトルの親要素でposition:relativeを使用します。次に、タイトルの高さを設定する必要があります。幅を
flex: 0 0 200pxに置き換えました。これにより、メニューのサイズが変更されなくなり、常に 200px のままになります。
リーリー リーリー