title: Div with both floating element and vertically centered dynamic content inside
body: <p>That's a famous problem but still I could not find a solution to it. What I want to achieve is this:</p>
  <pre><code>&lt;div&gt;
    &lt;div class=&quot;buttons&quot; style=&quot;float: right&quot;&gt;BUTTONS&lt;/div&gt;
    .... random content of any length/size here vertically centered
  &lt;/div&gt;
  </code></pre>
  <p>Now, to clarify the problem - it would work fine if the content is higher than the floating buttons, but sometimes it's not - one line of text and tall buttons.</p>
  <p>The existing solutions do not work because for example:</p>
  <ul>
  <li>I need a floating element so I can't use flex for container</li>
  <li>The main content should dictate the container height so I cannot make it position: absolute (well, actually both content and floating should dictate the height)</li>
  <li>I can't use fixed height</li>
  </ul>
  <p>Here are few things that I tried - you can see that it doesn't really work - text overlaps floating, container size not increased with content, etc. The first one serves as an example that is <strong>almost</strong> what I need - except that it's not centered vertically, that's the missing part.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: flex;
    flex-flow: column;
  }
  
  .float {
    float: right; 
    background: green;
  }
  
  #test1 {
    border: 1px solid red; 
    vertical-align: middle; 
    display: table-cell; 
    width: 300px;
  }
  
  .test2 {
    position: relative; 
    border: 1px solid red; 
    vertical-align: middle; 
    display: table-cell; 
    width: 300px;
  }
  
  .text {
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translate(0, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="test1"&gt;
      &lt;div class="float"&gt;Float Float&lt;/div&gt;
      &lt;div&gt;When content is large it should dictate the height and wrap to fill the available space even horizontally - which is why float is needed&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="test1"&gt;
      &lt;div class="float"&gt;Float&lt;br/&gt;Float&lt;br/&gt;Float&lt;/div&gt;
      &lt;div&gt;But if content is short and float big - content is not centered&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="test2"&gt;
      &lt;div class="float"&gt;Float&lt;br/&gt;Float&lt;br/&gt;Float&lt;/div&gt;
      &lt;div class="text"&gt;We can center it e.g. with absolute&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="test2"&gt;
      &lt;div class="float"&gt;Float&lt;br/&gt;Float&lt;br/&gt;Float&lt;/div&gt;
      &lt;div class="text"&gt;But the same markup will not quite work if the content is longer - it overlaps floating &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="test2"&gt;
      &lt;div class="float"&gt;Float&lt;/div&gt;
      &lt;div class="text"&gt;And if floating height is not enough the content will overflow &lt;br/&gt;Text&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In real app that would be something like a content card but with floating actions in the top right corner (kind of window buttons) - actions can be buttons, images, etc - so both content and floating actions have dynamic unknown size.</p>