複数のdivにメッセージを表示し、ウィンドウサイズが変更されたときにeachptherと重ならないようにする方法

Question

私はコンテナーを持ってメッセージを表示しています。ウィンドウサイズを変更しているときにテキストが重なっています。 ここに私のコードです。

<div id="msgRowInfo"> 
    <div style="hieight:100%;width:100%"> 
      <div id="msgInfo"> 
       <div id="msgType" >{{msg.msgType}}</div> 
       <div id="msgTime" >{{msg.time}}</div> 
      </div> 
      <div id="msgContent" >{{msg.subject}}</div> 
      <div id="msgDescription" >{{msg.description}}</div> 
    </div>  
</div> 

ここは私のCSSです。

私はmsg.msgTypeをリサイズたとmsg.timeが重なっている

#msgRowInfo{ 
     padding-top: 5px; 
      padding-left: 5px; 
      height: 100%; 
      width: 100%; 
      border-bottom: lightgrey; 
      border-bottom-style: solid; 
      border-bottom-width: thin; 
      display: -ms-inline-flexbox 
      } 
     #msgInfo{ 
     width:100%; 
    padding-left:1%; 
     } 
     #msgType{ 
     display: inline-flex; 
      font-size: 20px; 
      width: 70%; 
     } 
     #msgTime{ 
     width:27%; 
     display: inline-block; 
      float: right; 
      text-align: right; 
      padding-right: 3%; 
     } 
     #msgContent{ 
     padding-left: 1%; 
     width:100%; 
     font-size: 20px; 
     } 

。どうやってお互いに重なり合わないようにするか、ウィンドウのサイズを小さくすると、次の行に来るはずです。

Answer 1

#msgRowInfo { 
 
    padding: 5px; 
 
    border-bottom: lightgrey 1px solid; 
 
    font-size: 20px; 
 
} 
 
#msgInfo { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-color: red; 
 
    
 
} 
 
#msgType { 
 
    background-color: pink; 
 
    /* flex basis sets a minium width of the message type so message time wraps */ 
 
    flex: 1 1 75%; 
 
} 
 
#msgTime { 
 
    background-color: tan; 
 
}

<div id="msgRowInfo"> 
 
    <div id="msgInfo"> 
 
    <div id="msgType">{{msg.msgType}}</div> 
 
    <div id="msgTime">{{msg.time}}</div> 
 
    </div> 
 
    <div id="msgContent">{{msg.subject}}</div> 
 
    <div id="msgDescription">{{msg.description}}</div> 
 
</div>

私はあなたがそう、私は最良の推測を作ら探しているまさにここでは、実際に確認されませんでした。私はCSSといくつかのhtmlをたくさん削除しました。場合によっては複雑さを減らすことで、問題を解決するのに役立ちます。背景色を追加して、何が起こっているかを確認することもできます。ご質問がある場合はお知らせください。 display flexをメッセージ情報領域に適用すると、TypeとTimeのオーバーラップが停止します。お役に立てれば。

もちろん、これは他にも多くの問題があります。