Using Flex box with a set size div

Question

I have a container at 100% width and an image in a left floating <div> at 100px X 100px with a right floating <div> at the same height but i want it to fill the remaining space without having to use a table structure. I believe i can do this with the css element Flex but does anyone know how?

CSS

#container {
    width:100%;
    height:100px;
}
#image {
    width:100px;
    height:100px;
    float:left;
}
#rightcontent {
    float:right;
}

HTML

<div id="container">
    <div id="image">
    </div>
    <div id="rightcontent">
    </div>
</div>

refer http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space?rq=1 — Sridhar R, Nov 11 '13 at 09:07
Flexbox is not very well supported yet, see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes for details — xec, Nov 11 '13 at 09:24

score 2 · Answer 1 · answered Nov 11 '13 at 09:09

2

You just need to add an overflow to your right element without floating it:

#rightcontent {
  overflow: hidden;
}

This will make #rightcontent to fill the remaining space. Value could be also scroll, but it really doesn't matter because there is nothing to overflow.

It's the cleanest solution.

http://jsfiddle.net/SW8uE/

answered Nov 11 '13 at 09:09

pzin

4,200
2
28
49

@theDazzler It does work. Who downvoted this? Also, a good read: http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – xec Nov 11 '13 at 09:14
I didn't downvote it because it is close to the solution. You need to add a 100px height to right div – theDazzler Nov 11 '13 at 09:15
2

I think the question is to fill the remaining horizontal space. – pzin Nov 11 '13 at 09:16
he says he wants a right div of same height "
at 100px X 100px with a right floating
at the same height "
– theDazzler Nov 11 '13 at 09:19

Roko C. Buljan · Accepted Answer · 2013-11-11T09:29:53.310

Using CSS display:flex; property to the parent element;

LIVE DEMO

#container {
    width:100%;
    height:100px;
    display: flex; /* NOTE THIS */
    overflow:auto;
}
#image {
    width:100px;
    height:100px;
    background:#faf;
}
#rightcontent {
    background:#cf5;
    width:100%;      /* AND THIS */
}

You don't need to use <table> to emulate a table behavior:

LIVE DEMO

#container{
  height:100px;
  width:100%;
  display:table;  /* NOTE THIS */
}
#container > div{
  display:table-cell; /* AND THIS */
}
#image{
  width:100px;
  background:#faf;
}
#rightcontent{
  background:#cf5;
}

Or by simply assigning the background to the parent:

LIVE DEMO

#container {
    width:100%;
    height:100px;
    background:#cf5;  /* NOTE THIS */
}
#image {
    width:100px;
    height:100px;
    float:left;
    background:#faf;
}
#rightcontent {

}

+1 for `display: table-cell;`, about as clean solution as you can get. — xec, Nov 11 '13 at 09:22
@xec thanks, added most of the possible and nicest solutions. — Roko C. Buljan, Nov 11 '13 at 09:32

Using Flex box with a set size div

CSS

HTML

2 Answers2