Width of div is wrong (flex)

Question

I need a div with 70px. But if you inspect this element, it has 64px. In my app, the green div is a sidebar with js animation. I need to "push" the content (it has 100% of width).

.parent {
  display: flex;
  width: 100%;
  background: rgba(0,0,0,.2);
}

<div class="parent">  
  <div style="width:70px; background: green; height: 50px"></div>
  <div style="width: 100%; background: rgba(0,0,0,.4)">a</div>
</div>

how can i have 70px on green div?

score 2 · Accepted Answer · answered Nov 03 '21 at 15:52

Add flex-shrink: 0; to the element that shouldn't become smaller:

.parent {
  display: flex;
  width: 100%;
  background: rgba(0,0,0,.2);
}

<div class="parent">  
  <div style="width:70px; background: green; height: 50px; flex-shrink: 0;"></div>
  <div style="width: 100%; background: rgba(0,0,0,.4)">a</div>
</div>

score 1 · Answer 2 · answered Nov 03 '21 at 15:49

Remove the 100% width on the second div and replace with flex:1

.parent {
  display: flex;
  width: 100%;
  background: rgba(0,0,0,.2);
}

<div class="parent">  
  <div style="width:70px; background: green; height: 50px"></div>
  <div style="flex:1; background: rgba(0,0,0,.4)">a</div>
</div>

Width of div is wrong (flex)

2 Answers2