div与えられた空白があるとき、兄弟の全幅を取っていない：nowrap;

Question

私はdivの2つのdivを持つHTML div構造を持っています。divの幅は他よりも大きいです。divは両方とも同じ幅を持ち、幅は両方とも最大でなければなりません。

Please click here for demo

.wrapper { 
 
    border: 1px solid #E3E3E3; 
 
    height: 100%; 
 
    padding: 20px; 
 
    width: 320px; 
 
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
} 
 

 
.bar { 
 
    overflow: auto; 
 
    height: calc(100% - 50px); 
 
} 
 

 
.info-container { 
 
    border-bottom-color: #E3E3E3; 
 
    border-bottom-width: 2px; 
 
    border-bottom-style: solid; 
 
    min-height: 30px; 
 
    max-height: 125px; 
 
    white-space: nowrap; 
 
} 
 

 
.info-container:first-of-type { 
 
    margin-top: 0px; 
 
} 
 

 
.info-container:last-of-type { 
 
    border-bottom-color: #E3E3E3; 
 
} 
 

 
.date-name-container { 
 
    color: #999999; 
 
    font-size: 13px; 
 
} 
 

 
.details-container { 
 
    color: black; 
 
    font-size: 19px; 
 
} 
 

 
.details-container a { 
 
    color: #0074D9; 
 
} 
 

 
.details-container:last-of-type { 
 
    margin-bottom: 20px; 
 
} 
 

 
.text-alignment { 
 
    line-height: 0.7; 
 
}

<div class="wrapper"> 
 
    <div class="bar"> 
 
    <div class="info-container"> 
 
     <div class="date-name-container"> 
 
     8/28/2016 - hcjkashkjsha sa dsajd ahskjd askd 
 
     </div> 
 
     <div class="details-container"> 
 
     akjhjdhaj as hajk dahkjd hakjd ahkjdhasdjkashdsa d 
 
     </div> 
 
     <div class="details-container"> 
 
     (CasdR 2797asda11asdad10: Nladsyte Podasrtadasadl da.1asd4ad radadasseldaease) 
 
     </div> 
 
    </div> 
 
    
 
    <div class="info-container"> 
 
     <div class="date-name-container"> 
 
     8/28/2016 - hcjkashkjsha sa dsajd ahskjd askd 
 
     </div> 
 
     <div class="details-container"> 
 
     (CasdR 2797asda11asdad10: Nladsyte Podasrtadasadl da.1asd4ad radadasseldaease) 
 
     </div> 
 
     <div class="details-container text-alignment"> 
 
     <a href="https://google.com" target="_blank">https://sdaajaslkdjlkajsdlksjalkasjdlksajdlsajldkjlaksjdlkasjdalkjdkl/asdasd/sdasdNotes</a> 
 
     <a href="https://google.com" target="_blank">https://sdaajaslkdjlkajsdlksjalkasjdlksajdlsajldkjlaksjdlkasjdalkjdkl/asdasd/sdasdNotes</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <button type="reset">Hide</button> 
 
    </div> 
 
</div>

あなたが水平方向にスクロールした場合灰色の線は、全幅を取っていません。 最大幅がdivの要素を取りたいと思っています。

Answer 1

コンテンツがオーバーフローしても、block要素は親要素の幅が100%であるため、この問題が発生しています。

良い方法は、両方のdivをラップしてinline-flexを使用することです。

.flex-wrap { 
    display: inline-flex; 
    flex-direction: column; 
} 

.wrapper { 
 
    border: 1px solid #E3E3E3; 
 
    height: 100%; 
 
    padding: 20px; 
 
    width: 320px; 
 
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
} 
 

 
.bar { 
 
    overflow: auto; 
 
    height: calc(100% - 50px); 
 
} 
 

 
.info-container { 
 
    border-bottom-color: #E3E3E3; 
 
    border-bottom-width: 2px; 
 
    border-bottom-style: solid; 
 
    min-height: 30px; 
 
    max-height: 125px; 
 
    white-space: nowrap; 
 
} 
 

 
.info-container:first-of-type { 
 
    margin-top: 0px; 
 
} 
 

 
.info-container:last-of-type { 
 
    border-bottom-color: #E3E3E3; 
 
} 
 

 
.date-name-container { 
 
    color: #999999; 
 
    font-size: 13px; 
 
} 
 

 
.details-container { 
 
    color: black; 
 
    font-size: 19px; 
 
} 
 

 
.details-container a { 
 
    color: #0074D9; 
 
} 
 

 
.details-container:last-of-type { 
 
    margin-bottom: 20px; 
 
} 
 

 
.text-alignment { 
 
    line-height: 0.7; 
 
} 
 

 
.flex-wrap { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
}

<div class="wrapper"> 
 
    <div class="bar"> 
 
    <div class="flex-wrap"> 
 
     <div class="info-container"> 
 
     <div class="date-name-container"> 
 
      8/28/2016 - hcjkashkjsha sa dsajd ahskjd askd 
 
     </div> 
 
     <div class="details-container"> 
 
      akjhjdhaj as hajk dahkjd hakjd ahkjdhasdjkashdsa d 
 
     </div> 
 
     <div class="details-container"> 
 
      (CasdR 2797asda11asdad10: Nladsyte Podasrtadasadl da.1asd4ad radadasseldaease) 
 
     </div> 
 
     </div> 
 

 
     <div class="info-container"> 
 
     <div class="date-name-container"> 
 
      8/28/2016 - hcjkashkjsha sa dsajd ahskjd askd 
 
     </div> 
 
     <div class="details-container"> 
 
      (CasdR 2797asda11asdad10: Nladsyte Podasrtadasadl da.1asd4ad radadasseldaease) 
 
     </div> 
 
     <div class="details-container text-alignment"> 
 
      <a href="https://google.com" target="_blank">https://sdaajaslkdjlkajsdlksjalkasjdlksajdlsajldkjlaksjdlkasjdalkjdkl/asdasd/sdasdNotes</a> 
 
      <a href="https://google.com" target="_blank">https://sdaajaslkdjlkajsdlksjalkasjdlksajdlsajldkjlaksjdlkasjdalkjdkl/asdasd/sdasdNotes</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <button type="reset">Hide</button> 
 
    </div> 
 
</div>