How to force flex children not to overflow the container?
The children overflow their parent element because their intrinsic height (the height of their contents) is larger than the parent's height. You can advise the browser to ignore the intrinsic height by setting min-height: 0 on the child elements. If you add overflow: hidden the result should be what you seem to expect:
.container { display: flex; flex-direction: column; background-color: #ccc; height: 210px; width: 200px;}.child { width: 100px; min-height: 0; overflow: hidden;}.first { background-color: rgba(255, 0, 0, 0.2);}.second { background-color: rgba(0, 255, 0, 0.2);}.third { background-color: rgba(0, 0, 255, 0.2);}<div class="container"> <div class="first child">first first first first first first first</div> <div class="second child">second second second second second second second second second second second second second second second second second second second</div> <div class="third child">third</div></div>How to prevent flex-items from overflowing flex parent with no wrap?
Set display: inline-flex on the .parent class to change it to an inline element. This will also force the .parent to expand to contain its children. Then by setting min-width: 100% on the .parent class, it will force it to expand to 100% of the containing element.
.parent {
display: inline-flex;
flex-direction: row;
background-color: red;
min-width: 100%;
}
.child {
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;
margin: 5px;
height: 100px;
background-color: blue;
}
Prevent flex items from overflowing a container
Your flex items have
flex: 0 0 200px; /* <aside> */
flex: 1 0 auto; /* <article> */
That means:
The
<aside>will start at200pxwide.Then it won't grow nor shrink.
The
<article>will start at the width given by the content.Then, if there is available space, it will grow to cover it.
Otherwise it won't shrink.
To prevent horizontal overflow, you can:
- Use
flex-basis: 0and then let them grow with a positiveflex-grow. - Use a positive
flex-shrinkto let them shrink if there isn't enough space.
To prevent vertical overflow, you can
- Use
min-heightinstead ofheightto allow the flex items grow more if necessary - Use
overflowdifferent than visible on the flex items - Use
overflowdifferent than visible on the flex container
For example,
main, aside, article {
margin: 10px;
border: solid 1px #000;
border-bottom: 0;
min-height: 50px; /* min-height instead of height */
}
main {
display: flex;
}
aside {
flex: 0 1 200px; /* Positive flex-shrink */
}
article {
flex: 1 1 auto; /* Positive flex-shrink */
}<main>
<aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
<article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>Prevent a child element from overflowing its parent in flexbox
An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot be smaller than the size of its content.
Therefore, text-overflow: ellipsis cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)
To override this behavior, use min-width: 0 or overflow: hidden. More details.
#container { display: flex; flex-wrap: wrap; border: thin solid gray;}
.card-wrapper { width: 33.33%; display: flex; background: #e0e0ff;}
.card { flex-grow: 1; margin: 7px; display: flex; flex-direction: column; border: thin solid gray; background: #e0ffff; overflow: hidden; /* NEW */}
.card div { border: thin solid gray;}
.card div:nth-child(1) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; /* NEW */}
.card div:nth-child(2) { flex-grow: 2;}<div id="container"> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Multiline<br/>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div> <div>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Body</div> <div>Footer</div> </div> </div> <div class="card-wrapper"> <div class="card"> <div>Title</div> <div>Body</div> <div>Footer</div> </div> </div></div>html/css flex: How to prevent item in container exceed parent container height?
To solve this with flexbox you need to wrap the box you want to scroll and add overflow-x: hidden; to the wrapping container. To fix some extra space use the calc() method. This happens, when is used height: 100vh; on a scrollable element.
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--header-height: 60px;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f1f1f1;
}
header {
min-height: var(--header-height);
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
}
.box1,
.box2 {
display: flex;
flex: 1 0 50%;
border: 1px solid red;
}
.box2 {
height: calc(100vh - var(--header-height));
background-color: antiquewhite;
overflow-x: hidden;
}
.scrollable {
width: 100%;
display: flex;
overflow-y: auto;
}<div class="container">
<header>Hello Flex!</header>
<main>
<div class="box1">1</div>
<div class="box2">
<div class="scrollable">
2<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> 2
<br />2<br />2<br /> very long content, should be scrollable and NOT stretch parent.
</div>
</div>
</main>
</div>Can't overflow: scroll internal div in flexbox
If you want scroll A2 then it should be A2 which is overflowed. But in your case you are overflowing .wrap. As you set A2 as height:800px; and A as flex:0, 0, auto; ,so your A class div expand which as a result overflows your .wrap which is height:400px;.
So what you need is to set a fixed height and add overflow-y:scroll for A2 where height should be compatible with height of wrap so it does not get overflowed and add scrollbar to your A2 when your content inside A2 gets overflowed. Following should better represent your what you need:
Edit: Since i misunderstood the question, so here is edit with better solution.
As I already mentioned that overflow is result of height of children more than than the parent container. In this particular case as A2 has height which overflow its parent A which in result overflows .wrap.
Solution is min-height: 0; (or some actual value). We add this to flex children Otherwise the flex child containing the other elements won’t narrow past the “implied height” of those elements.
So all we have to do is to set min-height:0 (or some other value) to A. And set min-height:0 (or some other value) and overflow-y:scroll; to class A2. Here if you need more info or similar example.
.wrap {
display: flex;
flex-direction: column;
height: 200px;
justify-content: space-between;
background-color: gray;
}
.A {
min-height:0;
display: flex;
flex-direction: column;
flex: 1, 1, auto;
}
.B {
display: flex;
flex-direction: column;
flex: 0, 0, auto;
}
.A1 {
background-color: yellow;
flex: 0, 0, auto;
}
.A2 {
background-color: green;
flex: 1;
min-height:0;
overflow-y:scroll;
}
.B1 {
background-color: blue;
flex: 0, 0, auto;
}<div class="wrap">
<div class="A">
<div class="A1">
<div>A1</div>
<div>A1</div>
</div>
<div class="A2">
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
<div>A2</div>
</div>
</div>
<div class="B">
<div class="B1">
<div>B1</div>
<div>B1</div>
</div>
</div>
</div>flex child is growing out of parent
Solution #1 - Without Scroll
Instead of flex: 1 0 auto on the video container, just use flex: 1. This sizes the item based on available space, not the intrinsic height of the content.
Then, because flex items cannot be smaller than the size of their content – min-height: auto is the default – add min-height: 0 to allow the item to shrink to fit inside the container.
.box-grow {
flex: 1; /* formerly flex: 1 0 auto; */
background: green;
padding: 5px;
margin: 5px;
min-height: 0; /* new */
}
.my-box { height: 300px; width: 600px; background: red; padding: 5px;}.content-box { background: blue;}.col { display: flex; flex-direction: column; justify-content: space-between}.box-shrink { flex: 0 1 auto; background: green; padding: 5px; margin: 5px;}.box-grow { flex: 1; /* formerly flex: 1 0 auto; */ background: green; padding: 5px; margin: 5px; min-height: 0; /* new */}video { max-height: 100%; max-width: 100%; margin: auto; display: block;}<div class="my-box col"> <div class="box-shrink"> small sized static content </div> <div class="content-box box-grow"> <video controls> <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> </video> </div> <div class="box-shrink"> small sized static content </div></div>Flexbox child with overflow: hidden overflowing grandparent margins
You mainly have two issues:
- You are setting
width:100%to the wrapper and this doesn't account for margin so you will logically have overflow and since the body is a flex container withjustify-content:centerthe margin will overflow equally from both sides that's why you think it's not applied. - You are facing the
min-widthconstraint of flexbox which is forcing you to setwidth:100%thinking it's the good solution. This same constraint is also preventing the element from shrinking lower than the 100% you specified (related: Why is a flex item limited to parent size?)
To fix this you need to remove width:100% from wrapper and consider min-width:0 instead. You can also remove the min-width applied to .L and you need to consider flex-shrink:0 on .R (or replace its width by min-width)
body { background-color: #000; color: #FFF; display: flex; justify-content: center;}
.wrapper { margin: 0 1.5rem; max-width: 40rem; min-width:0;}
.fit_content_box { display: flex; align-items: center;}
.L { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.R { margin-left: 1rem; flex-shrink:0; height: 1rem; width: 1rem; background-color: #FFF;}
.overflow { display: flex; justify-content: space-between;}
.overflow>div { width: 0; display: flex; justify-content: center;}<body> <div class="wrapper"> <div class="fit_content_box"> <p class="L">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="R"></div> </div>
<div class="overflow"> <div> <p>0</p> </div> <div> <p>12</p> </div> <div> <p>24</p> </div> </div> </div></body>Related Topics
How to Override "::-Webkit-Scrollbar" CSS Rule and Make Scrollbar Visible Again
CSS Animate Circle Border Filling with Color
Blurry Background Images After Update to Ie11
CSS Image Scaling to Fit Within Area Not Distort
CSS Multiple Classes Property Override
Css: What's a Good Way to Create a Raised Box Effect
Difference Between Baseline of Empty and Non-Empty Inline Blocks
How to Align Input Field and Submit Button (Also Differences Between: Ie, Ffox, Chrome)
Media Query for Vertical Scroll
What Is the Use Case of :Host-Context Selector in Angular
How to Change the Play Icon of Embedded Youtube Videos
No Border-Spacing Before First Item and After Last Item
Flexbox Vertically Split Container in Half
Why Are There Two Colons Here? Span::Before