parent display flex row child div expand text

Question

'wrap' contains elements in row.

The problem is flex-direction:row on 'wrap' causes text in 'holder' to not expand.

I can add white-space:nowrap; to 'holder' but this does not help because I want to add max width as well.

I tried flex-shrink but this has not effect.

How can I make text expand in holder dropdown?

.wrap {
  display: flex;
  flex-direction: row;
  position: relative;
}

.btn {
  position: relative;
  background: #ccc;
  padding: 10px;
  margin:10px;
}

.holder {
  position: relative;
  max-width: 300px;
  /*white-space:nowrap;*/
  flex-shrink: 0;
}

.dropdown {
  position: absolute;
  top: 50px;
  display: flex;
  flex-direction: column;
}

<div class="wrap">

  <div class="holder">
    <div class="btn">button</div>
    <div class="dropdown">

      <label class="lab"><input class="foo" type="radio" ><span class="info">option 1</info></label>
      <label class="lab"><input class="foo" type="radio"><span class="info">option 2</info></label>
      <label class="lab"><input class="foo" type="radio" ><span class="info">long option Lorem ipsum dolor sit amet, consectetur adipiscing elit.</info></label>

    </div>
  </div>
  
   <div class="holder">
    <div class="btn">button</div>
    <div class="dropdown">

      <label class="lab"><input class="foo" type="radio" ><span class="info">option 1</info></label>
      <label class="lab"><input class="foo" type="radio"><span class="info">option 2</info></label>
      <label class="lab"><input class="foo" type="radio" ><span class="info">long option Lorem ipsum dolor sit amet, consectetur adipiscing elit.</info></label>

    </div>
  </div>
  
   <div class="holder">
    <div class="btn">button</div>
    <div class="dropdown">

      <label class="lab"><input class="foo" type="radio" ><span class="info">option 1</info></label>
      <label class="lab"><input class="foo" type="radio"><span class="info">option 2</info></label>
      <label class="lab"><input class="foo" type="radio" ><span class="info">long option Lorem ipsum dolor sit amet, consectetur adipiscing elit.</info></label>

    </div>
  </div>
</div>

Answer 1

Just use width: 100%; to the .holder class. Maybe it'll help you. Thank you.

.holder {
  width: 100%;
}