Как сохранить flexbox такой же высоты, как окно просмотра (без прокрутки)?

Question

У меня есть 3 div в flexbox (div id = "content_row") с flex-direction = row для представления 3 списков. Ни один из списков не должен расти, если содержимое, которое может отображаться больше экрана, сам список должен добавить полосу прокрутки, а не всю веб-страницу.

Из-за этого я поместил этот flexbox в другой flexbox с flex- direction = column и присвоил ему значение flex, равное 1. Могу ли я добавить атрибут для предотвращения роста этого flexbox?

Я знаю, что могу просто добавить свойство overflow в списки, но у меня возникли проблемы с этим в прошлое. Всегда есть один браузер, который отображает его неправильно.

#content_row{ display: flex; flex-direction: row;}
.row-item{ flex: 0.33; margin-left: 10px; margin-right: 10px;}
#content_column{ display: flex; flex-direction: column;}
#content_row_wrapper{ flex: 1;}

<div id="content_column">
 <div id="content_row_wrapper">
  <div id="content_row">
   <div class=".row-item"></div>
   <div class=".row-item"></div>
   <div class=".row-item"></div>
  </div>
 </div>
</div>

Cheers

Answer 1

добавьте и удалите текст, чтобы увидеть изменения, если вы не хотите, чтобы полоса прокрутки на вашей веб-странице, то вам нужно сделать переполнение скрытым от тела и применить то же самое к вашему контенту div. Теперь полоса прокрутки находится в строке содержимого, а не в теле, удалите данные, и она исчезнет.

body{
  overflow: hidden;
}
#content_row{ display: flex; flex-direction: row; overflow-y: auto;     max-height: 300px;}
.row-item{ flex: 0.33; margin-left: 10px; margin-right: 10px;}

#content_column{ display: flex; flex-direction: column;}
#content_row_wrapper{ flex: 1;}

<div id="content_column">
 <div id="content_row_wrapper">
  <div id="content_row">
   <div class="row-item">
    More content foemo purposeMore content for demo purpose More content for demo purposeMore content for demo purpose More content for demo pur for demo purposeMore content for demo purpose More content for demo purposeMore content foreMore content for demo purpose More content for demo purposeMore content for demo purpose More content for demo purposeMore content r demo purposeMore content for demo purpose More content for demo pur for demo purposeMore content for demo purpose More content for demo purposeMore content foreMore content for demo purpose More content for demo purposeMore content for demo purpose More content for demo purposeMore content for demo purposez atul
</div>
<div class="row-item">2nd Div</div>
<div class="row-item"> 3rd Div</div>
</div>
</div>
</div>