go4cas go4cas - 7 months ago 20
HTML Question

Flexbox Conatiner inline taking up remaining width

I have a main

<div>
container, consisting of 3 child
<div>
's:

<div id="parent">
<div id="child-left">.. some markup ..</div>
<div id="child-flex>
<div id="flex-child-1">
<div id="flex-child-2">
<div id="flex-child-3">
<div id="flex-child-4">
</div>
<div id="child-right">.. some markup ..</div>
</div>



  • child-left
    is
    display:inline
    and
    float:left
    , with a fixed
    set
    width

  • child-right
    is
    display:inline
    and
    float:right
    ,
    with a fixed set
    width

  • child-flex
    is
    display:inline-flex



I would like to achieve the following:


  1. Get the
    child-flex
    container to display inline in between
    child-left
    and
    child-right
    , and take up any remaining space.

  2. Get all the
    flex-child-
    children to have equal width within the
    child-flex
    container. At the moment I have set
    flex: 1 0 auto;
    , but it does not seem to work. Could be because of the parent?


Answer

Just use flexbox throughout...in this case, use display:flex on the parent and then make the #child-flex flex-container a nested flexbox.

No need to use floats at all.

Codepen Demo

#parent {
  display: flex;
  height: 100px;
}
#child-right,
#child-left {
  flex: 0 0 100px;
  background: pink;
}
#child-flex {
  flex: 1;
  background: lightblue;
  display: flex;
}
.flex-child {
  flex: 1;
  border: 1px solid grey;
}
<div id="parent">
  <div id="child-left">some markup</div>
  <div id="child-flex">
    <div class="flex-child"></div>
    <div class="flex-child"></div>
    <div class="flex-child"></div>
    <div class="flex-child"></div>
  </div>
  <div id="child-right">some markup</div>
</div>