div width:100%の状態で横並びにするには

前提・実現したいこと

divにwidth:100%;float:leftを付けても横並びにならず、改行されてしまいます
100%を二つ横並びで表示するにはどうしたらいいですか？

該当のソースコード

html
1<style>
2body,html{
3height:100%;
4}
5</style>
6
7<div style="width:100%;height:20%;background-color:red;float:left"></div>
8<div style="width:100%;height:20%;background-color:blue;float:left"></div>

firegrape

2020/10/19 15:07

よくわかってないのですが、width:100%って横幅MAXの値ではないのですか？

退会済みユーザー

2020/10/19 15:09

横スクロールバーが出て横並びになりませんか？

firegrape

2020/10/19 15:19

ならないと思います。両方50％にすると横並びになりますよ。

退会済みユーザー

2020/10/19 15:23

100%を1000pxにしてみましたが、、pxでも横並びにできないようで横スクロールバーを出せる条件みたいなのが、あるんでしょうかね・・・

firegrape

2020/10/19 15:33 編集

ソースは違いますけど、これとか横スクロール出るので、試してみてください。 <!DOCTYPE html> <html lang="ja"> <head> <style> .box1{ width: 5000px; height: 400px; background-color: gray; font-size:0; overflow-x: auto; white-space: nowrap; } .test2 { display: inline-block; width: 2000px; height: 200px; background: black; margin-right:3px; } .test3 { width: 2000px; height: 200px; background: blue; } </style> </head> <body> <div class= "box1"> <ul class> <li class="test2"></li> <li class="test2"></li> <li class="test3"></li> </ul> </div> </body>

miyabi_pudding

2020/10/19 16:44

firegrapeさん、回答でそのソースコード出せばよいのでは？

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

回答1件

ベストアンサー

HTML
1<div id="wrapper">
2  <div id="blockRed"></div>
3  <div id="blockBlue"></div>
4</div>

css
1#wrapper {
2  display: flex;
3  height: 20%;
4  overflow: auto;
5}
6#blockRed,
7#blockBlue {
8  flex-shrink: 0;
9  height: 100%;
10  width: 100%;
11}
12#blockRed { background-color: red;}
13#blockBlue { background-color: blue;}