반응형
내용이 넘치는 Flexbox 스크롤
위의 레이아웃을 만들기 위해 사용하는 코드는 다음과 같습니다.
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>스타일링에 사용되는 코드를 생략했습니다.여러분은 그것을 모두 볼 수 있습니다.
위의 것들은 효과가 있지만, 그 때.content영역의 내용이 오버플로우되면 전체 페이지가 스크롤됩니다.나는 콘텐츠 영역 자체만 스크롤하기를 원해서 div에 추가했습니다.
문제는 기둥 자체가 부모의 키 이상으로 확장되지 않는다는 것입니다. 그래서 거기서도 국경선이 잘립니다.
설정 방법content독립적으로 스크롤할 수 있는 영역, 여전히 하위 영역을 넘어 확장할 수 있습니다.content상자 높이?
이에 대해 Tab Atkins(Flexbox 사양의 저자)와 이야기를 나누었는데, 다음과 같은 결과가 나왔습니다.
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
display: flex;
min-height: min-content; /* needs vendor prefixes */
}<div class="content">
<div class="box">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>펜은 다음과 같습니다.
- 짧은 열이 늘어납니다.
- 더 긴 열이 넘치고 스크롤됩니다.
이것이 효과가 있는 이유는align-items: stretch항목이 고유 높이를 가지면 축소되지 않습니다. 이는 여기서 달성됩니다.min-content.
저는 많은 시행착오 끝에 이 문제를 아주 우아하게 해결했습니다.
제 블로그 포스트를 확인해 보세요: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
기본적으로 플렉스박스 셀을 스크롤 가능하게 만들려면 모든 부모를 overflow: hidden;그렇지 않으면 오버플로 설정을 무시하고 대신 상위 항목을 더 크게 만듭니다.
작업position:absolute;와 함께flex:
플렉스 항목을 위치시킵니다.position: relative그리고 그 안에 다른 것을 추가합니다.<div>요소(다음을 포함
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
이렇게 하면 요소가 상대적으로 위치한 상위 요소의 경계로 확장되지만 확장은 허용되지 않습니다.안에서.overflow: auto;그러면 예상대로 작동합니다.
.all-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
p {
text-align: justify;
}
.bottom-0 {
bottom: 0;
}
.overflow-auto {
overflow: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-5 w-100">
<div class="row bg-dark m-0">
<div class="col-sm-9 p-0 d-flex flex-wrap">
<!-- LEFT-SIDE - ROW-1 -->
<div class="row m-0 p-0">
<!-- CARD 1 -->
<div class="col-md-8 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/700x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 2 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
</div>
<div class="row m-0">
<!-- CARD 3 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 4 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 5-->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
</div>
</div>
<div class="col-sm-3 p-0">
<div class="bg-white m-2 p-2 position-absolute all-0 d-flex flex-column">
<h4>Social Sidebar...</h4>
<hr />
<div class="d-flex overflow-auto">
<p>
Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut
sweet tart. opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate
bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar.
Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake
ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut
sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate
bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar.
Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake
ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple
pie apple pie. Halva
</div>
</div>
</div>
</div>최종 결과:
굵은 글씨로 표시된 다음 CSS 변경 사항(스크롤을 테스트하기 위해 열에 있는 여러 콘텐츠)이 작동합니다.각 콘텐츠 열을 개별적으로 스크롤할 수 있게 만들어 원래 요청했던 것보다 더 좋을 수도 있습니다.어쨌든, 이 펜에서 결과를 보세요.
.content { flex: 1; 디스플레이: flex; 높이: 1px; }
. 열 {padding: 20padding; 테두리 오른쪽: 1padding 솔리드 #999; 오버플로: auto; }
여기서 요령은 스크롤 가능한 패널에 다음과 같은 기능이 필요하다는 것입니다.heightFlexbox에 의해 결정되는 것이 아니라 문자 그대로 어딘가에 설정됩니다(이 경우 부모를 통해).그래서 심지어height: 1px 동합니다작다▁the▁works합니동.flex-grow:1패널 크기를 적절하게 조정합니다.
조금 늦었지만 이것은 도움이 될 수 있습니다: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
기본적으로 당신은 그것을 넣어야 합니다.html,bodyheight: 100%;그리고 당신의 모든 내용을 포장합니다.<div class="wrap"> <!-- content --> </div>
CSS:
html, body {
height: 100%;
}
.wrap {
height: 100vh;
display: flex;
}
저는 이 답을 어디에서도 보지 못했습니다.하지만 제가 필요로 했던 속임수는 그 물건들이flex-shrink: 0그렇지 않으면 그들은 쥐어짜일 것입니다.
.container {
display: flex;
overflow: auto
}
.container > * {
flex-shrink: 0;
width: 10em;
height: 10em;
background: linear-gradient(to bottom right, #F0F, #0FF);
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>추가할 항목:
align-items: flex-start;
의 에 따라.content {}그것은 적어도 (파이어폭스와 크롬 모두에서) 당신의 펜에 그것을 고정시킵니다.
기적으로본,.content가지다align-items: stretchhttp://dev.w3.org/csswg/css-flexbox/ #algo-message에 따라 모든 자동 높이 어린이의 크기를 자신의 키에 맞게 조정합니다.대조적으로, 값은flex-start에서는 아이들이 자신의 높이를 계산하고 시작 가장자리에 정렬할 수 있습니다(과 오버플로 및 스크롤 막대 트리거).
은 이문에대해단은추것다입니는가하지결책한제▁to다▁the▁just▁add것니입▁for▁is를 추가하는 것입니다.overflow: auto;콘텐츠 래퍼를 스크롤할 수 있도록 하기 위해 .content로 이동합니다.
래퍼 및 "Flexbox"와 .overflowed스크롤 가능한 내용입니다.
솔루션은 다음을 추가하는 것입니다.overflow: hidden (or auto);큰 콘텐츠 주위에 있는 래퍼의 부모(overflow: auto;로 설정)로 이동합니다.
한 가지 문제가 발생했습니다. 스크롤 막대를 사용하려면 요소의 높이를 지정해야 한다는 것입니다.
이 방법은 각 열에 다른 div 집합을 중첩하고 열 상위의 표시를 flex-direction: 열로 유연하게 설정하는 것입니다.
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
overflow-x: hidden;
color: white;
}
.base-container {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: 100%;
overflow-y: hidden;
align-items: stretch;
}
.title {
flex: 0 0 50px;
color: black;
}
.container {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.container .header {
flex: 0 0 50px;
background-color: red;
}
.container .body {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
.container .body .left {
display: flex;
flex-direction: column;
flex: 0 0 80px;
background-color: blue;
}
.container .body .left .content,
.container .body .main .content,
.container .body .right .content {
flex: 1 1 auto;
overflow-y: auto;
height: 100px;
}
.container .body .main .content.noscrollbar {
overflow-y: hidden;
}
.container .body .main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: green;
}
.container .body .right {
display: flex;
flex-direction: column;
flex: 0 0 300px;
background-color: yellow;
color: black;
}
.test {
margin: 5px 5px;
border: 1px solid white;
height: calc(100% - 10px);
}
</style>
html은 다음과 같습니다.
<div class="base-container">
<div class="title">
Title
</div>
<div class="container">
<div class="header">
Header
</div>
<div class="body">
<div class="left">
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
</div>
<div class="main">
<div class="content noscrollbar">
<div class="test">Test</div>
</div>
</div>
<div class="right">
<div class="content">
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>End</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
저는 별 기쁨 없이 위의 답변들을 많이 시도했습니다.저는 이러한 답변 중 많은 부분이 구식이거나 제 요구 사항에 맞지 않았다고 생각합니다.제 문제에 대한 대답은 다음과 같은 관련 질문에서 나왔습니다.
Flex 항목의 자동 최소 크기
Flexbox 기본 설정이 표시됩니다.
유연한 항목은 주 축을 따라 내용 크기보다 작을 수 없습니다.
플렉스 박스 항목이 스크롤되는 것을 방해한 것은 요소의 크기가 자동으로 조정된다는 것입니다.auto스크롤하지 않고 내용을 기준으로 크기를 조정합니다.다음은 완전히 작동하는 현대식 예입니다(테일윈드 사용).
<!DOCTYPE html>
<html class="h-full">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full">
<div class="h-full flex flex-col items-stretch">
<div class="bg-white border-b border-gray-400">
<h1>
Header
</h1>
</div>
<div class="flex flex-row flex-auto min-h-0">
<div class="flex flex-col bg-red-600 items-stretch min-h-0" style="flex: 0 0 25%;">
<div class="flex-initial min-h-0 overflow-x-hidden overflow-y-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
<p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
<p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
<p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
<p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>
</div>
</div>
<div class="flex flex-col items-stretch min-h-0 flex-auto">
<div class="flex-initial min-h-0 overflow-x-hidden overflow-y-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
<p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
<p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
<p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
<p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>
</div>
</div>
</div>
</div>
</body>
</html>크롬에서 이렇게 렌더링(100)
.list-wrap {
width: 355px;
height: 100%;
position: relative;
.list {
position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
width: 100%;
}
}
언급URL : https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content
반응형
'programing' 카테고리의 다른 글
| 도커가 도커 레지스트리 서버에 이미 로그인되어 있는지 확인하는 방법 (0) | 2023.08.06 |
|---|---|
| 상위 디렉터리에서 파일을 가져오시겠습니까? (0) | 2023.08.06 |
| Base64를 사용하여 Base64에서 문자열을 디코딩하고 인코딩하는 방법을 아는 사람이 있습니까? (0) | 2023.08.06 |
| 데이터베이스에 메타데이터를 유지하지 않고 Spring-Batch? (0) | 2023.08.06 |
| 다음 기능을 표현합니다. 정말 무엇을 위한 것입니까? (0) | 2023.08.06 |