1

A question I posted here a while ago lead me to fiddling around with flexbox a bit, at first it seemed like the solution to what I needed but that is no longer the case since the content width is unknown.

I made this FIDDLE that shows what I mean. I am trying to get the YELLOW div to expand itself, to increase it's width property when multiple items are present. The display of the items is proper in that example, they are docked to the right side, in a direction left-to-right, but I cannot seem to get the yellow div to expand based on the content.

function addMore() {
  var element = document.createElement('div');
  element.classList.add("flexitem");
  document.getElementsByClassName('flexcontainer')[0].appendChild(element);
}
.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
  height: 100%;
}

#rightDock {
  position: fixed;
  right: 0px;
  top: 0px;
  background-color: yellow;
  width: auto;
  min-width: 10px;
  height: 100%;
}

.flexitem {
  width: 150px;
  height: 30px;
  margin-right: 15px;
  margin-left: 15px;
  margin-top: 20px;
  background-color: red;
}
<div id="rightDock">
  <div class="flexcontainer">
    <div class="flexitem"></div>
    <div class="flexitem"></div>
    <div class="flexitem"></div>
  </div>
</div>

<button onclick="addMore();"style="margin: 30px 30px; height: 60px; width:200px">
  Add more divs to flexbox
</button>
Community
  • 1
  • 1
Dellirium
  • 1,362
  • 16
  • 30
  • So if I am getting this right, it is not possible to do such a thing. – Dellirium Nov 24 '16 at 17:06
  • I am not aware of a CSS solution. The accepted answer in the dupe refers to a jQuery workaround. – Michael Benjamin Nov 24 '16 at 17:07
  • Yeah, noted. Well its a small script and can be easily integrated, shame that browsers do not implement this. Thanks for linking the duplicate which lead to the answer, albeit not the entirely what I was hoping for. I also do not like the wording of that "marked as exact duplicate" I am sorry, they refer to the same thing, and I was not able to find the post the other person made, but saying they are "exactly the same" is absurd, it implies I posted the same thing twice. – Dellirium Nov 24 '16 at 17:14

0 Answers0