2

Let's get straight to the code with simplified example of my problem.

body {
  font-family: Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.container1 {
  border: 2px solid black;
  display: flex;
}

.child {
  padding: 10px;
}

.w100 {
  width: 100px;
}

.f200 {
  flex: 0 0 200px;
}

.green {
  background: #5fd700;
}

.purple {
  background: #9e00ff;
}

.rel {
  position: relative;
  margin-bottom: 80px;
}

.container2 {
  position: absolute;
  border: 2px solid black;
  display: flex;
}
<h2>Container with position: static</h2>
<h3>width: 100px</h3>
<div class="container1">
  <div class="child green w100">
    child1
  </div>
  <div class="child purple w100">
    child2
  </div>
</div>

<h3>flex-basis: 200px</h3>
<div class="container1">
  <div class="child green f200">
    child1
  </div>
  <div class="child purple f200">
    child2
  </div>
</div>

<h3>width: 100px; flex-basis: 200px</h3>
<div class="container1">
  <div class="child green w100 f200">
    child1
  </div>
  <div class="child purple w100 f200">
    child2
  </div>
</div>

<hr>

<h2>Container with position: absolute</h2>
<h3>width: 100px</h3>
<div class="rel">
  <div class="container2">
    <div class="child green w100">
      child1
    </div>
    <div class="child purple w100">
      child2
    </div>
  </div>  
</div>

<h3>flex-basis: 200px</h3>
<div class="rel">
  <div class="container2">
    <div class="child green f200">
      child1
    </div>
    <div class="child purple f200">
      child2
    </div>
  </div>  
</div>

<h3>width: 100px; flex-basis: 200px</h3>
<div class="rel">
  <div class="container2">
    <div class="child green w100 f200">
      child1
    </div>
    <div class="child purple w100 f200">
      child2
    </div>
  </div>  
</div>

I want absolutely positioned container to adjust it's width according to the sizes of it's flex childs. From the screenshot above it's clear that everything works as expected when childs have width set explicitly, but when I start to use flex-basis, the layout stop to work as expected.

What is the proper way to use flex container with position:absolute and childs with flex-basis?

dwjohnston
  • 11,163
  • 32
  • 99
  • 194
Eugene Karataev
  • 1,777
  • 1
  • 11
  • 24
  • You might want to read this: https://stackoverflow.com/questions/41033245/does-position-absolute-conflict-with-flexbox – dwjohnston Jun 05 '20 at 05:45
  • you are ok to manipulate the HTML structure or it needs to be the same as you created above? – Atul Rajput Jun 05 '20 at 05:48
  • @AtulRajput yeah, I'm ok with changing html structure – Eugene Karataev Jun 05 '20 at 05:57
  • @dwjohnston thanks for the link, I've read it. The author of the link's questions faced the problem to stretch absolutely positioned container to the full width of the screen, but my case is different: I want to stretch my container in according to the width of child flex items – Eugene Karataev Jun 05 '20 at 06:04
  • 1
    check the bug section of the duplicate *flex-basis fails in Chrome and Firefox when the grandparent container is a shrink-to-fit element. The set-up works fine in Edge.* – Temani Afif Jun 05 '20 at 08:10

0 Answers0