Chrome не отвечает на flexbox css в моем нижнем колонтитуле?

Question

Я не могу понять, почему Chrome не отвечает на мой flex-box нижнего колонтитула css веб-сайт www.batistaelectric.com работает на моем браузере Iphone chrome, браузере safari Iphone, Ima c браузер Safari, он даже работает в моем chrome предварительном просмотре из скобок, но не в Chrome после загрузки на сервер.

В браузере Chrome на Ima c нижний колонтитул остается встроенным, а не укладывается в столбец.

  @media only screen and (min-width: 801px) {
  .pv-header {
    width: 100%
  }
  .pv-footer {
    display: -webkit-box;
    display: -moz-box;
    display: - ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

<div class="pv-footer">
  <div id="nav-a">
    <ul>
      <li>
        <div class="button1">
          <b><a href="about.html">About Us</a></b>

        </div>
      </li>
      <li>
        <div class="button1">
          <b><a href="Disclaimer.html">Disclaimer</a></b>

        </div>
      </li>
      <li>
        <div class="button1">

          <b><a href="https://www.iubenda.com/privacy-policy/13910995" class="iubenda-nostyle no-brand iubenda-embed" title="Privacy Policy ">Privacy Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script></b>


        </div>


      </li>
    </ul>

  </div>


  <h3>Batista Residential Electric, INC.</h3>


</div>

Это снимок того, как он выглядит в моем chrome браузере, поскольку вы можете видеть, что он не переносится при свертывании. Так что он не видит flexbox css для нижнего колонтитула. нижний колонтитул включен chrome не укладывается нижний колонтитул не упаковывается

Answer 1

Вы говорите о "кнопках" (элементах li) в div .pv-footer? Если это так, вам нужно сделать так, чтобы их прямой родитель сгибался. В этом случае:

#nav-a ul {
    display: flex;
    flex-wrap: wrap;
}

Даже в этом случае, если они достаточно малы, чтобы поместиться в ширину области просмотра, они все равно не будут переноситься. Вам нужно было бы увеличить их ширину примерно так:

#nav-a ul li {
    min-width: 100%;
}

Создание гибкого .pv-footer позволяет сгибать его прямым потомкам, но не вложенным элементам, таким как элементы списка (li).