css标签的绝对位置，但仍考虑到父宽度

Question

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

Answer 1

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