3 dynamic width columns, center stretch to 100% width. How?

Question

css

Hey!
I'm making a responsive header.

1. fixed logo column - 200px
2. central column with search field
3. dynamic width column on the right, some icons are shown/hidden depending on the width of the window.
How to stretch the search field to the full available width?
Even tried old-school tables, it doesn't work.
Is this possible with pure CSS?
Thank you.

Answer 1

<div class="box">
  <div class="logoblock">
     asdas        
  </div>
  <div class="searchblock">
    asdsd

  </div>
  <div class="buttonblock">
    sdsd
  </div>
  <div class="buttonblock">
    ffffff
  </div>
  <div class="buttonblock">
    ddddd
  </div>
  <div class="buttonblock">
    dddddd
  </div>
</div>

.box {
  display: flex;
  height: 300px;
  width: 100%;
  background: red;
}
.logoblock{
   flex-basis: 300px;
   flex-shrink: 0;
   background:green;
}
.searchblock{
  flex-basis: 100%;
}
.buttonblock {
   flex-basis: 200px;
   flex-shrink: 0;
   width: 200px;
   border: 2px solid #fff;
   background:orange;
}

Answer 2

You can try making display:block; to the search block

Answer 3

codepen.io/aliencash/pen/gPKQax

Answer 4

And this is how it turned out for me: codepen.io/abnmt/pen/EPGzjj
This is if there is a clear understanding at what width how many and which buttons to show.