Answer the question
In order to leave comments, you need to log in
3 dynamic width columns, center stretch to 100% width. How?
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 the question
In order to leave comments, you need to log in
<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;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question