How to respect new lines in an HTML blockquote but use single-line spacing in lists?

I would like to use CSS to format a blockquote so the following (without a <br>) will all appear on separate lines:

<blockquote>
  Line #1
  Line #2
  <p>
    Line #3
    Line #4
  </p>
</blockquote>

...but the following will only use single-spaced lines:

<blockquote>
  <ul>
    <li>Item #1</li>
    <li>Item #2</li>
  </ul>
</blockquote>

How can this be done? Please see the following demo showing the issue (e.g. when trying white-space: pre-wrap):

<html>
  <style>
    .bq-common {
      background: #f9f9f9;
      border-left: 10px solid #ccc;
      margin: 1.5em 10px;
      padding: 0.5em 10px;
    }
    .bq1 {
      white-space: normal;
    }
    .bq2 {
      white-space: pre-wrap;
    }
  </style>

  <blockquote class="bq-common bq1">
    Line #1
    Line #2
    <p>
      Line #3
      Line #4
    </p>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </blockquote>

  <blockquote class="bq-common bq2">
    Line #1
    Line #2
    <p>
      Line #3
      Line #4
    </p>
    <ul>
      <li>Item #1</li>
      <li>Item #2</li>
    </ul>
  </blockquote>
</html>

Solution

reset the white-space on the nested element:

.bq-common {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}

.bq2 {
  white-space: pre-wrap;
}
.bq2 ul, .bq2 ol {
  white-space: normal;
}

<blockquote class="bq-common bq2">
  Line #1
  Line #2
  <p>
    Line #3
    Line #4
  </p>
  <ul>
    <li>Item #1</li>
    <li>Item #2</li>
  </ul>
</blockquote>