当给定白色空间时，div不占宽度的兄弟：nowrap;

Question

我有一个HTML div结构，其中有两个div s，一个div宽度比其他更宽，我希望div s都应该具有相同的宽度宽度将是两者的最大值。

Please click here for demo

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您水平滚动，灰色线条不会占据全宽。 我希望它采用最大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>