Zurb Foundation grid or block grid not working with vertical tabs

Question

I have a set of vertical tabs, and when I try and nest in some grid or block grid elements everything seems to overflow outside of the element

i.e the 1,2,3 should be in the right section of the below image

<div class="row">
<div class="medium-8 columns">
    <ul class="tabs vertical" data-tab>
      <li class="tab-title active"><a href="#domainnames">Domain Names</a></li>
      <li class="tab-title"><a href="#webhosting">Web Hosting</a></li>
      <li class="tab-title"><a href="#businesshosting">Business Hosting</a></li>
      <li class="tab-title"><a href="#premiumservices">Premium Services</a></li>
    </ul>
    <div class="tabs-content">
      <div class="content active" id="domainnames">
        <div class="row">
          <div class="medium-12 columns">
            <h1>{$LANG.domaincheckerchoosedomain}</h1>
            <form method="post" action="{$systemsslurl}domainchecker.php">
                <div class="row collapse">
                  <div class="medium-9 columns">
                    <input type="text" name="domain" placeholder="{$LANG.domaincheckerdomainexample}">
                  </div>
                  <div class="medium-3 columns">
                    {if $condlinks.domainreg}<input type="submit" value="{$LANG.checkavailability}" class="button postfix" /> {/if}
                  </div>
                </div>
            </form>
          </div>
        </div>
      </div>
      <div class="content" id="webhosting">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="content" id="businesshosting">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="content" id="premiumservices">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

The tabs vertical and tabs-content got some special properties to build to vertical navigation structure.

Tab tabs vertical got width: 20% and float:left.

The .small-block-grid-3 breaks out of this float.

Try:

@import "foundation";
.small-block-grid-3 {
margin-left: 20%;
& > li:nth-of-type(3n+1) {
    clear: none;
}
}

Demo: http://sassmeister.com/gist/b3c63c443765c4b7ad56

update

is this a similar issue with the standard grid?

No, i think you should be able to use the standard grid without modifications:

<div aria-hidden="false" class="content active" id="panel21">
  <div class="row">
  <div class="small-3 columns">1</div>
  <div class="small-3 columns">2</div>
  <div class="small-3 columns">3</div>
</div>

Demo: http://sassmeister.com/gist/29c180401ed433ff2d2d