Flexible width divs next to a fixed width div

Question

Today I'm facing a challenging situation (at least for me).

Actually I have to make some divs flexible inside a parent div and having another fixed div as a 'brother'. These flexible divs must be 100% according to the width of their parent.

Here you go a picture made to explain my situation:

print-squeme

I was thinking something like:

.parent {
  width: 500px; /* this value can change any time */
  padding: 10px;
  border: 1px solid red;
  float: left;
}

.parent div {
    float: left;
    border: 1px solid #ccc;
}

.fixed {
  width: 100px;
  height: 100px;
  background: #ccc;
  
}

.flexible {
  width: calc(100% - 100px); /*  IT IS NOT WORKING AS I WOULD LIKE  */
}

<div class='parent'>
  <div class='fixed'>*fixed</div>
  <div class='flexible'>*flexible 1</div>
  <div class='flexible'>*flexible 2</div>
</div>

Someone could help me?

Thanks

score 2 · Answer 1 · answered Jun 21 '17 at 19:00

You can use flexbox to achieve this layout.

.parent {
  display: inline-flex;     /* 1 */
  padding: 10px;
  border: 1px solid red;
}

.sub-container {            /* 2 */
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* 3 */
}

.flexible {
  flex: 1;                  /* 4 */
  border: 1px solid black;
}

.sub-container > div + div {
  margin-top: 5px;
}

.fixed {
  width: 100px;
  height: 100px;
  background: #ccc;
}

<div class='parent'>
  <div class='fixed'>*fixed</div>
  <div class='sub-container'>
    <div class='flexible'>*flexible 1</div>
    <div class='flexible'>*flexible 2 *flexible 2 *flexible 2</div>
  </div>
</div>

Notes:

Inline-level flex container. (It adjusts to the width of its content.)
Create a sub-container for the flexible divs. Also uses flex properties.
An initial setting of a flex container is align-items: stretch. This means that flex items will automatically expand to cover the full length of the cross axis. In this case, that's the width.
Distribute the vertical space in the container evenly among the two flex items.

What doesn't work in Safari? I just tested and it looks good. — Michael Benjamin, Jun 23 '17 at 15:06
@Michael_B OP's is using Safari 5.1.7 for Windows to test on... :) ...as you can see in his comments at my answer — Asons, Jun 23 '17 at 18:09

sorayadragon · Accepted Answer · 2017-06-21T19:11:10.823

You can use flexbox for this. You should wrap your two flexible divs in a container so that they will stack. Then you can set the parent to display: flex; flex-direction: row;. Then set your flexible wrapper to display: flex; flex-direction: column; and set flex-grow: 1 on the flexible divs and the flexible wrapper so they expand to fill both the vertical and horizontal space.

.parent {
  width: 500px;
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}

.parent div {
  border: 1px solid #ccc;
}

.flexcontainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fixed {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.flexible {
  flex-grow: 1;
}

<div class='parent'>
  <div class='fixed'>*fixed</div>
  <div class="flexcontainer">
    <div class='flexible'>*flexible 1</div>
    <div class='flexible'>*flexible 2</div>
  </div>
</div>

Hi Guy, Now I saw that it doesn't work properly with Safari. Do you know why? — Mineiro-DF, Jun 23 '17 at 15:04
My guess is support. There are some known issues listed for Safari on this site: https://caniuse.com/#feat=flexbox — sorayadragon, Jun 23 '17 at 15:24

score 1 · Answer 3 · answered Jun 21 '17 at 18:57

Taking your code as a base, you can add left and margin-left to .flexible. Also change the width as you need to calculate the padding and the container as well.

.flexible {
  left: 0;
  margin-left: 10px;
  width: calc(100% - 120px); /*  IT IS NOT WORKING AS I WOULD LIKE  */
}

Flexible width divs next to a fixed width div

3 Answers3