[Tailwind CSS] 2カラムレイアウトにしたいが、"flex flex-wrap"が優先されて縦並びになってしまう

Rails + Tailwind CSSでポートフォリオを作成中です。

２カラムレイアウトを目指していますが、レスポンシブ表示用のflex flex-wrapが優先されてしまい縦並びになってしまいます。

ご助言をいただけると幸いです。

実現したいこと

<p>コンテンツ</p>をサイドバーの右側（画像の紫色の部分）に幅いっぱいで表示したい。

レイアウト

コード

app/views/layouts/application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title><%= full_title(yield(:title)) %></title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
9
10    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
12    <%= render 'layouts/shim' %>
13  </head>
14  <body>
15    <%= render 'layouts/header' %>
16    <% if flash.any? %>
17      <%= render 'layouts/notification' %>
18    <% end %>
19
20    <main class='container flex flex-wrap mx-auto'>
21      <article class='w-full lg:w-1/4'>
22        <% if user_signed_in? %>
23          <div>
24            サイドバー<br>
25            １<br>
26            ２<br>
27            ３<br>
28          </div>
29        <% end %>
30      </article>
31      <article class='w-full lg:w-3/4'>
32        <p>コンテンツ</p>
33      </article>
34    </main>
35
36    <%= render 'layouts/footer' %>
37    <%= debug(params) if Rails.env.development? %>
38  </body>
39</html>

w-1/4とw-3/4は画面全体に対しての比率で、親要素に対する幅指定にはできないのでしょうか。

よろしくお願いいたします。

recal

2022/04/07 11:10

1024px以上になると右に来ませんか？

hajsu00

2022/04/07 11:41

コメントありがとうございます。 w-1/4⇨w-3/12 w-3/4⇨w-9/12 と変更したところ、思った通りに表示させることができました。なぜ成功したかまだ理解できていませんが... ありがとうございます。

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

回答1件

自己解決

w-1/4⇨w-3/12、w-3/4⇨w-9/12のように書き換えたところ、思い通りに表示させることができました。

app/views/layouts/application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title><%= full_title(yield(:title)) %></title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
9
10    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
12    <%= render 'layouts/shim' %>
13  </head>
14  <body>
15    <%= render 'layouts/header' %>
16    <% if flash.any? %>
17      <%= render 'layouts/notification' %>
18    <% end %>
19
20    <main class='container flex flex-wrap mx-auto'>
21      <article class='w-full lg:w-1/4'>
22        <% if user_signed_in? %>
23          <div>
24            サイドバー<br>
25            １<br>
26            ２<br>
27            ３<br>
28          </div>
29        <% end %>
30      </article>
31      <article class='w-full lg:w-3/4'>
32        <p>コンテンツ</p>
33      </article>
34    </main>
35
36    <%= render 'layouts/footer' %>
37    <%= debug(params) if Rails.env.development? %>
38  </body>
39</html>