質問編集履歴

1 画像の追記

takawork

takawork score 81

2020/09/14 18:30  投稿

親要素からはみ出してしまいます。
画面をスマホサイズにすると、.guide2-boxから.guide2-box-text-dtlのテキストが下にはみ出てしまいます。
画面を小さくすると文字が下に折り返しになって、その分親要素.guide2-boxの縦の長さが伸びるようにしたいのですが、どうしたら良いですか?
.guide2-boxにheight:auto;などを入れてみたりしたのですが、だめでした。
よろしくお願いします。
```
<div class="gu-box col-lg-6 p-3">
         <a href="#" class="guide2-box">
           <div>
             <img src="/img/type.png" class="guide2-box-img">
           </div>
           <div class="guide2-box-txt">
             <div class="guide2-box-text-ttl">
               <h1>タイトルタイトルタイトルタイトルタイトル</h1>
             </div>
             <div class="guide2-box-text-dtl">
               <p>説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</p>
             </div>
           </div>
         </a>
       </div>
```
```
.guide2-box {
 background-color: white;
 border-radius: 8px;
 height: auto;
 display: flex;
 padding: 5px;
 border-right: solid 18px #ffc06e;
 box-shadow:0 2px 4px rgba(0,0,0,.28);
 flex-shrink: 0;
}
.guide2-box-img {
 height: 120px;
}
.guide2-box-txt {
 margin:0 10px;
}
.guide2-box-text-ttl h1{
 color: #0033cc;
 font-size:20px;
 font-weight: bold;
 margin-bottom:2px;
}
.guide2-box-text-dtl p{
 color: black;
 font-size:16px;
 font-weight: 600;
}
.guide2-box-text-dtl span{
 background: linear-gradient(transparent 50%, #a8ebffbc 50%);
}
```  
 
【追記の画像】  
![イメージ説明](e96d06ca67599d22f7da6c6310d8620c.png)  
```  
guide2-box {  
   background-color: white;  
   border-radius: 8px;  
   height: 136px;  
   display: -webkit-box;  
   display: -ms-flexbox;  
   display: flex;  
   padding: 5px;  
   border-right: solid 18px #ffc06e;  
   -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);  
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);  
   -ms-flex-negative: 0;  
   flex-shrink: 0;  
}  
```
  • HTML

    24463 questions

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

  • CSS

    17480 questions

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

  • レスポンシブWebデザイン

    780 questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る