Flex-wrap: nowrap で上限を指定したい　横スクロール

前提・実現したいこと

CSSで横スクロール時の上限を決めて、折り返したい

発生している問題・エラーメッセージ

スマホ表示の際にflex-wrap:nowrapで横に並べ、横スクロールさせています。
項目が16個ほどあり、これを上限を決めて8個までを横スクロールして2段に並べたいと思っています。
nowrapで並べると16個すべてが横に並んでしまいますが、これを上限を設定して8個目にｎｏｗｒａｐを解除したりすることはできますでしょうか。
テーブルはphpで生成され、必ず16個とは限りません

該当のソースコード

<div class=“tableshow”>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
	<table class=“table1 col-4”>…..</table>
</div>

css
1    .tableshow {
2        overflow-x: scroll;
3        flex-wrap: nowrap;
4    }

行動規範の内容に同意します

回答1件

ベストアンサー

希望している回答とは違うかもしれませんが、 PHP で出力されているとのことですので
8個目の後に </div><div class="tableshow"> 挿入するのではどうでしょうか。
複雑なテクニックも必要なく、 CSS もシンプルに保てるかと思います。

どうしても CSS でとのことであれば nowrap ではなく、
wrap にすれば1行8個に制限することができるかと思います。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5</head>
6<body>
7  <div class="tableshow_wrap">
8    <div class="tableshow">
9      <div class="div1 col-4">1</div>
10      <div class="div1 col-4">2</div>
11      <div class="div1 col-4">3</div>
12      <div class="div1 col-4">4</div>
13      <div class="div1 col-4">5</div>
14      <div class="div1 col-4">6</div>
15      <div class="div1 col-4">7</div>
16      <div class="div1 col-4">8</div>
17      <div class="div1 col-4">1</div>
18      <div class="div1 col-4">2</div>
19      <div class="div1 col-4">3</div>
20      <div class="div1 col-4">4</div>
21      <div class="div1 col-4">5</div>
22      <div class="div1 col-4">6</div>
23      <div class="div1 col-4">7</div>
24      <div class="div1 col-4">8</div>
25      <div class="div1 col-4">1</div>
26      <div class="div1 col-4">2</div>
27      <div class="div1 col-4">3</div>
28      <div class="div1 col-4">4</div>
29      <div class="div1 col-4">5</div>
30      <div class="div1 col-4">6</div>
31      <div class="div1 col-4">7</div>
32      <div class="div1 col-4">8</div>
33    </div>
34  </div>
35</body>
36</html>

css
1.tableshow_wrap {
2  overflow-x: scroll;
3  width: 50vw;
4}
5
6.tableshow {
7  width: 100vw;
8  flex-wrap: wrap;
9  display: flex;
10}
11
12.div1 {
13  width: 12.5%;
14}