質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1313閲覧

flex利用時、tableをスクロールにした際の飛び出しについて

hiroakitajima

総合スコア27

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/06/01 05:57

flexでレイアウトした要素の中にtableを配置しています。
画面幅768px時にtableを横スクロールさせてたいのですが、tableが飛び出てしまいます。
対処法はありますでしょうか。
何卒よろしくお願いいたします。

html

1<main> 2 <ul class="list_layout"> 3 <li class="side"> 4 サイド 5 </li> 6 <li class="main"> 7 <section class="table_wrap"> 8 <div class="table_wrap_inner"> 9 <table> 10 <thead> 11 <tr> 12 <th>見出し</th> 13 <th>見出し</th> 14 <th>見出し</th> 15 <th>見出し</th> 16 <th>見出し</th> 17 </tr> 18 </thead> 19 <tfoot> 20 <tr> 21 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 22 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 23 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 24 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 25 <td>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</td> 26 </tr> 27 </tfoot> 28 </table> 29 </div> 30 </section> 31 </li> 32 </ul> 33</main> 34

css

1* { 2 box-sizing: border-box; 3} 4main { 5 padding: 100px; 6} 7.list_layout { 8 display: -webkit-flex; display: flex; 9 -webkit-flex-wrap: nowrap; flex-wrap: nowrap; 10} 11.list_layout .side { 12 -webkit-flex: 0 0 300px; flex: 0 0 300px; 13 background: blue; 14 min-height: 100px; 15} 16.list_layout .main { 17 -webkit-flex: 1 1 auto; flex: 1 1 auto; 18 background: #ddd; 19} 20 21table { 22 width: 100%; 23} 24@media screen and (max-width: 768px){ 25 .table_wrap { 26 overflow: auto; 27 } 28 .table_wrap_inner { 29 width: 800px; 30 } 31} 32

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/06/01 06:39

800px確保している時点で入らないと思うのですが、どのようにするのが理想なのでしょうか?
hiroakitajima

2018/06/01 07:32

入らないとはどういった意味でしょうか。flexを使用しなければtable_wrap内で.table_wrap_innerがスクロールするはずです。flexを使用した場合それがスクロールではなく全体が伸びてしまうため、理想はスクロールさせることです。引き続きよろしくお願いします。
guest

回答3

0

display: flexにするということは、その子がフレックスアイテムになることを気にしなければいけません。
https://drafts.csswg.org/css-flexbox-1/#min-size-auto

https://developer.mozilla.org/ja/docs/Web/CSS/flex

既定ではフレックスの項目は最小コンテンツサイズよりも収縮することはありません。これを変更するには、 min-width または min-height を設定してください。

投稿2018/06/01 08:11

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiroakitajima

2018/06/01 08:23

具体的にmin-width,min-heightでどのように解決できるのかご教示いただけますでしょうか?
x_x

2018/06/01 08:27

例えば .list_layout .main { min-width: 200px; }
hiroakitajima

2018/06/04 02:00

ご回答ありがとうございます。 ご教示いただいた通りに実装しましたら理想の表示になりました! 大変参考になりました。ありがとうございました。
guest

0

自己解決

.main に overflow:hidden; をかけることで理想の形になりました。
ありがとうございました。

投稿2018/06/01 08:02

hiroakitajima

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2018/06/01 09:29

解決済みところ、横から失礼します。 今回の場合、「メディアクエリ内の`table_wrapクラス`を削除し、その代わりに`mainクラス`に`overflow:auto`をかける」という方法でも質問者さんの実現したい動作が可能だと思います。ご参考までに。 実行例: https://jsfiddle.net/93nznjrs/
hiroakitajima

2018/06/01 14:31

ご回答ありがとうございます。 本当ですね!このやり方は思いつきませんでした。 とても参考になりました。ありがとうございました。
guest

0

flex-basisの値がautoになっているので、コンテンツの幅まで拡張されます。
.table_wrapの幅がいくつなのか明示してあげない限りはスクロールできません。

CSS

1* { 2 box-sizing: border-box; 3} 4main { 5 padding: 100px; 6} 7.list_layout { 8 display: -webkit-flex; display: flex; 9 -webkit-flex-wrap: nowrap; flex-wrap: nowrap; 10} 11.list_layout .side { 12 -webkit-flex: 0 0 300px; flex: 0 0 300px; 13 background: blue; 14 min-height: 100px; 15} 16.list_layout .main { 17 -webkit-flex: 1 1 auto; flex: 1 1 auto; 18 background: #ddd; 19} 20 21table { 22 width: 100%; 23} 24@media screen and (max-width: 768px){ 25 .table_wrap { 26 // 例えば明示的に幅を示す 27 max-width: 300px; 28 overflow: auto; 29 } 30 .table_wrap_inner { 31 width: 800px; 32 } 33}

投稿2018/06/01 07:49

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問