LaVOZs

The World’s Largest Online Community for Developers

'; css - possible to flex: 1 and minus px? - LavOzs.Com

I have an element with position of absolute and there's a container view i don't want to overlap with, i'm wondering if it's possible to have a child of parent with flex fill the spaces but decrease it with px? just so my absolute element won't be overlapped?

You can set margin on the flex items:

#container {
  display: flex;
  outline: 1px dotted blue
}

#container div {
  flex: 1 0 auto;
  outline: 1px dotted orange;
  margin: 10px;
}

#container div:last-child {
  margin-right: 60px;
}
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>