css - フレックスボックスに子要素が含まれていません

Question

フレックス表示を持つリスト項目にコンテナがあります。このコンテナ内のコンテンツも表示フレックスの場合、コンテナは、コンテンツがオーバーフローするのではなく、コンテンツのサイズに合わせてサイズ変更されます。リスト要素は次のようになります。

ラベルが長すぎると、ラベルのオーバーフローを避ける代わりに、リストアイテムのサイズが変更されます。

#div { 
 
    width: 300px; 
 
    border: 1px solid red; 
 
} 
 

 
#userimage { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
#usertag { 
 
    display: flex; 
 
} 
 

 
#inner {} 
 

 
#outer { 
 
    display: flex; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<div id="div"> 
 
    <ul> 
 
    <li> 
 
     <div id="outer"> 
 
     <div id="inner"> 
 
      <input type="checkbox" id="checkbox" /> 
 
     </div> 
 
     <div id="usertag"> 
 
      <div id="userimage"> 
 
      </div> 
 
      <p> 
 
      <label>1</label> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div id="outer"> 
 
     <div id="inner"> 
 
      <input type="checkbox" id="checkbox" /> 
 
     </div> 
 
     <div id="usertag"> 
 
      <div id="userimage"> 
 

 
      </div> 
 
      <p> 
 
      <label>12312312312451232e524t230t923t8rq0w9t8q0w9er</label> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

2番目のリスト項目は、ここではラベルのサイズに合わせてリサイズしています。 テキストに省略記号を表示します。それは私が外側のdivの表示を変更するときに発生します。しかし、アライメントはねじ込まれる。

フレックスディスプレイはどのように動作しますか？または私は何か間違っているのですか？

Answer 1

あなたの子供の外側に幅を与える必要があります。
チェックボックスの "inner" divの幅= 10％を指定します。
あなたの "usertag" divの幅= 90％。デフォルトでは

#div { 
 
    width: 300px; 
 
    border: 1px solid red; 
 
} 
 

 
#userimage { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
#usertag { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
#inner { 
 
width: 10%; 
 
} 
 

 
#outer { 
 
    display: flex; 
 
    width: 90%; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<div id="div"> 
 
    <ul> 
 
    <li> 
 
     <div id="outer"> 
 
     <div id="inner"> 
 
      <input type="checkbox" id="checkbox" /> 
 
     </div> 
 
     <div id="usertag"> 
 
      <div id="userimage"> 
 
      </div> 
 
      <p> 
 
      <label>1</label> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div id="outer"> 
 
     <div id="inner"> 
 
      <input type="checkbox" id="checkbox" /> 
 
     </div> 
 
     <div id="usertag"> 
 
      <div id="userimage"> 
 

 
      </div> 
 
      <p> 
 
      <label>12312312312451232e524t230t923t8rq0w9t8q0w9er</label> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>