Как сделать, чтобы элементы переполнения не увеличивали высоту flexbox? - PullRequest
Новая
       34

Как сделать, чтобы элементы переполнения не увеличивали высоту flexbox?

1 голос
/ 02 октября 2019

Я хочу создать переполнение: прокрутка во flexbox.

Я не знаю, как связать изображение на моем диске Google, поэтому я связываю этот URL. https://drive.google.com/open?id=17uM5twoprxmbo5xQ37kgeTaMwn7FGSu_

Видно, что компонент переполнения увеличил высоту своего контейнера. Компонент overflow: scorll во flexbox работает нормально, но увеличивает высоту контейнера.

Как я могу предотвратить эту проблему.

это код начальной загрузки. 

<div class="row display-flex">
  <div class="col" style="padding: 0; max-width: 35rem; height: auto">
    <b-img fluid" src="image" />
  </div>
  <div class="col" style="max-width: 18rem;  background: white;">
   <ul style="list-style: none; margin:0; padding:0;">
     <li><b-img :src="post.owner.thumbnail" rounded="circle" style="width: 24px; height: 24px;" /></li>
     <li>{{ post.owner.username }}</li>
            <li>{{ post.title }}</li>
   </ul>
   <div class="comment asd" style="overflow-y: scroll;">
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah..blah..blah..blah..blah..blah..</p>
       ........

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
  }
.display-flex .col {
    display: flex;
    flex-direction: column;
}

Спасибо!

1 Ответ

0 голосов
/ 02 октября 2019

Вы можете использовать класс Boostrap для этого:

  • d-flex равно display:flex

  • flex-wrap равно flex-wrap:wrap

  • flex-column равно flex-direction:column

  • col одинаково flex-grow:1

  • h-100 равно height:100%

  • overflow-auto равно overflow:auto

и многое другое по документам https://getbootstrap.com/docs/4.3/utilities/borders/

возможный пример из вашего кода использования этих классов 

/* demo purpose for snippet */

.fluid {max-height:90vh;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex flex-wrap">
  <div class="col" style="padding: 0; max-width: 35rem; height: auto">
    <img class="fluid" src="http://dummyimage.com/445x555" />
  </div>
  
  <div class="col d-flex flex-column" style="max-width: 18rem;  background: white;">
   <ul style="list-style: none; margin:0; padding:0;">
     <li><b-img :src="post.owner.thumbnail" rounded="circle" style="width: 24px; height: 24px;" /></li>
     <li>{{ post.owner.username }}</li>
            <li>{{ post.title }}</li>
   </ul>
   <div class="comment asd col h-100" style="overflow-y: scroll;">
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah ..blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    <p>blah..blah..blah..blah. .blah..blah..blah..blah..blah..</p>
    </div>
  </div>
...