2つのコンテナを見切れずに表示させたい

現在、練習材料として下記のホームページを模写しておりますが、タブレット用にレスポンシブ対応をさせてたく、や画面幅などを調整したりしましたが画面が縮小されたら、横並びになっているコンテナ同士も縮小されて表示させたいのですが、PC表示のまま見切れて表示されてしまいます。

試したこと
min/max-width等で試してみましたが、900px近くまで縮小すると見切れてしまい、うまく表示させることができませんでした。
何卒、ご教示願います。

参考サイト
https://xd.adobe.com/view/468eb41b-971c-4f63-73e2-3f807a46fc52-30bf/

HTML
1コード
2<!-- profile -->
3    <div id="profile">
4        <div class="p_container">
5            <div class="group347"><img src="/img/PCデザイン/グループ 347.svg" alt="347.svg"></div>
6            <div class="profile">
7               <p>Profile</p>
8            </div>
9
10            <div class="coment_box">
11                <div class="box_wrap">
12                    <div class="box-1"></div>
13                    <div class="box-2"></div>
14                    <div class="box-3">
15                        <img src="/img/PCデザイン/profile.png" alt="プロフィール画像">
16                    </div>
17                </div>
18                <div class="p_coment">
19                    <h2>プロフィール</h2>
20                    <p>つれづれなるまゝに、日暮らし、硯にむかひて、<br> 心にうつりゆくよしなし事を、<br> そこはかとなく書きつくれば、あやしうこそものぐるほし<br>けれ。（Wikipediaより）<br> つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほし けれ。（Wikipediaより）<br>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつ<br>りゆくよしなし事を、そこはかとなく書</p>
21                    <div class="sns_btn">
22                        <div class="i_btn">
23                            <a class="btn2 btn-style btn-hover04" href="#"><span class="btn-text btn1">Instagram</span>
24                            <span class="btn-child"></span></a>
25                        </div>
26                        <div class="t_btn">
27                            <a class="btn2 btn-style btn-hover04" href="#"><span class="btn-text btn1">Twitter</span>
28                            <span class="btn-child"></span></a>
29                        </div>
30                    </div>
31                </div>
32            </div>
33            <div class="group346"><img src="/img/PCデザイン/グループ 346.svg" alt=""></div>
34        </div>
35    </div>
36    <!-- profile -->
37
38```css
39コード
40/* profile */
41
42.p_container {
43    height: 716px;
44    width: 100%;
45    position: relative;
46}
47
48.group347 img {
49    position: absolute;
50    top: 0px;
51    right: 0px;
52}
53
54.group346 {
55    position: absolute;
56    bottom: 0;
57    left: 0;
58}
59
60.profile p {
61    position: absolute;
62    font-family: 'Bad Script', cursive;
63    color: #F6F3EB;
64    font-size: 120px;
65    top: 60px;
66    right: 40px;
67    z-index: 0;
68}
69
70.coment_box {
71    display: flex;
72    justify-content: center;
73    width: 100%;
74    height: auto;
75}
76
77.box_wrap {
78    position: relative;
79}
80
81/* ボックス重ね */
82
83.box-1 {
84    position: relative;
85    background-color: rgb(238, 51, 51);
86    z-index: 1;
87    top: 0;
88    left: 0;
89    height: 500px;
90    width: 400px;
91}
92
93.box-2 {
94    position: absolute;
95    background-color: #F6F3EB;
96    z-index: 2;
97    top: 16px;
98    left: 16px;
99    height: 500px;
100    width: 400px;
101}
102
103.box-3 {
104    position: absolute;
105    z-index: 3;
106    top: 8px;
107    left: 8px;
108}
109
110.p_coment {
111    width: 493px;
112    min-width: 50%;
113    height: 500px;
114    margin-left: 80px;
115}
116
117.p_coment h2 {
118    font-size: 36px;
119    font-weight: normal;
120    color: #572B23;
121    margin-bottom: 48px;
122    font-family: 'Sawarabi Gothic', sans-serif;
123}
124
125.p_coment p {
126    letter-spacing: 0.36px;
127    color: #572B23;
128    font-family: 'Sawarabi Gothic', sans-serif;
129    line-height: 35px;
130    text-align: left;
131    font-size: 18px;
132}
133
134   .sns_btn {
135       display: flex;
136       width: 440px;
137       height: 56px;
138       margin-top: 40px;
139       justify-content: space-between;
140   }
141
142   .i_btn {
143       background-color: #FFFFFFE6;
144       opacity: 0.8;
145   }
146
147   .t_btn {
148    background-color: #FFFFFFE6;
149    opacity: 0.8;
150   }
151

Lhankor_Mhy

2020/06/01 06:30

「見切れる」というのは具体的にはどういう状況ですか？

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

回答1件

同じ比率で縮小させるなら、一番手っ取り早いのは以下だと思います。

CSS
1.box_wrap {
2  position: relative;
3
4  /* 追加 */
5  flex: 0 1 400px;
6}
7.p_coment {
8    background: #ff0;
9    
10    /* コメントアウト */
11    /* width: 493px; */
12    
13    min-width: 50%;
14    height: 500px;
15    margin-left: 80px;
16    
17    /* 追加 */
18    flex: 0 1 493px;
19}
20
21/* .box_wrapの子要素は、親要素のサイズに追従するようにする。.box-3も必要かも */
22.box-1,
23.box-2 {
24  width: 100%;
25}