Невозможно заставить div соответствовать высоте flex - PullRequest
Новая
       6

Невозможно заставить div соответствовать высоте flex

0 голосов
/ 23 апреля 2019

Я использую в основном Bootstrap, но в этом случае ни чистый CSS, ни Bootstrap не могли бы это оправдать.У меня есть такой HTML-код: 

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
    <div class="container">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>

Теперь проблема в том, что div #filling должен заполняться динамически, и я хочу, чтобы он вел себя как ListView в программировании на Android.Я должен быть в состоянии прокрутить его.Поэтому я добавил немного CSS: 

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

Но если я заполняю div, добавляя потомков, как эти три .sample div, список растет вертикально, но #filling div тоже.Другими словами, это заставляет меня прокручивать всю страницу, а не просто div.

Надеюсь, я понял, что это будет помечено как дубликат любого гибкого вопроса, но я бы хотелполучить рабочее решение, потому что, кроме определения высоты div, скажем, в 250px, я не могу найти «отзывчивый» способ сделать это.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Пара вещей, h-40 не является классом Bootstrap, если только вы не используете его как свой собственный класс; Вспомогательные классы высоты Bootstrap просто h-25, h-50, h-75, h-100, h-auto.

Как уже упоминалось в моем комментарии и связанных ответах, если вы хотите использовать проценты, вам нужно иметь родителя с фиксированной высотой, чтобы процент мог принять это в качестве ссылки; другой вариант - использовать vh единиц для установки высоты относительно высоты области просмотра.

Bootstrap также предоставляет некоторые утилиты для этого

Теперь вам нужно учитывать содержание заголовков курса 

#posts_list {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  max-height: 60vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="container">
    <div class="row align-items-center mt-3">
      <div class="col-6 text-center">
        <img width="150" height="150" src="img/user-placeholder.svg">
        <p class="mt-2 mb-0">pholder</p>
      </div>
      <div class="col-6">
        <div class="mb-2">
          <div class="row">
            <div class="col-6 text-center">pholder</div>
            <div class="col-6 text-center">pholder</div>
          </div>
          <div class="row">
            <div class="col-6 text-center">Friends</div>
            <div class="col-6 text-center">Posts</div>
          </div>
        </div>
        <butto class="btn btn-transparent mt-2">Click</button>
      </div>
    </div>
    <br>
    <p class="text-center m-0">Contents</p>
    <hr class="mt-0 mb-2">
  </div>
  <div id="posts_list" class="h-60 text-center">
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
  </div>
</div>
0 голосов
/ 23 апреля 2019

Я создал быстрое решение, в котором я установил max-heigth вашего #filling div на 50%. Обратите внимание, что для этого вам нужно установить высоту всех внешних контейнеров на 100%.

JSBin ссылка: https://jsbin.com/nofobak/edit?html,css,output

<div id="my-container">
    <div class="container h-40">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="h-60 text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>


#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 50%;
}

html {
  height: 100%
}

body {
  height: 100%;
}

#my-container {
  height: 100%;
}
...