I have a flexbox layout with a div containing a label as the last item. It has to be position: absolute
. Is it possible to still make the parent div expand to contain the label?
<div class='container'>
<div class="item">flex1</div>
<div class="item">flex2</div>
<div class="item no-flex">
<div>
<label>nfdfesrsawe</label>
<div>
</div>
</div>
.container{
width: 100%;
display: flex;
background-color: red;
justify-content: space-between
}
.item {
border: solid black 1px;
flex: 1;
}
.no-flex {
flex: 0
}
label {
position: absolute;
}
https://codepen.io/anon/pen/yozvwx
EDIT: simplified example:
<div class='container'>
<label>Make the container fit around me, please</label>
<div>
.container{
background-color: red;
}
label {
position: absolute;
}
I need to work with this because the absolute positioning is defined by another framework (vuetify) and I can only try to fix it via css and not html changes
In short no.
Anything other than a flex child
will not respond to flex
as when you make something position:absolute
you force it to be block
not flex
.
Check an answer I have gave before regarding Flex Box's
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.