当给定空格时，div不采用同级的全宽: nowrap；

Question

我有一个超文本标记语言的div结构与两个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>

​