GXT 4 HtmlLayoutContainer with a Holy Grail Flex Layout.

FlexTemplate.html

<style>

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 12em;
}

.HolyGrail-nav {
  order: -1;
}

.HolyGrail,
.HolyGrail-body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;
  }
  .HolyGrail-content {
    flex: 1;
  }
  .HolyGrail-nav, .HolyGrail-ads {
    flex: 0 0 12em;
  }
}

.HolyGrail-nav {
  border: 1px dashed green;
  margin: 5px; 
}

.HolyGrail-content {
  border: 1px dashed blue;
  margin: 5px; 
  padding: 5px;
}

.HolyGrail-ads {
  border: 1px dashed coral;
  margin: 5px; 
}

header {
  border: 1px dashed brown;
  margin: 5px; 
}

footer {
  border: 1px dashed brown;
  margin: 5px; 
}

.gxtField { width: 100% !important; } .gxtField * { width: 100% !important; }

</style>

<div class="HolyGrail">
  <header>header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">
    
    	<div class="textField"></div>
    
    </main>
    <nav class="HolyGrail-nav">nav</nav>
    <aside class="HolyGrail-ads">ads</aside>
  </div>
  <footer>footer</footer>
</div>

HtmlContainerFlexExample.java

package com.sencha.gxt.test.client.layout_htmllayout.flex;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.XTemplates;
import com.sencha.gxt.widget.core.client.container.AbstractHtmlLayoutContainer.HtmlData;
import com.sencha.gxt.widget.core.client.container.HtmlLayoutContainer;
import com.sencha.gxt.widget.core.client.form.TextField;

public class HtmlContainerFlexExample implements EntryPoint {

	public interface FlexTemplate extends XTemplates {
		@XTemplate(source = "FlexTemplate.html")
		SafeHtml getTemplate();
	}

	@Override
	public void onModuleLoad() {
		HtmlLayoutContainer form = createLayout();

		RootPanel.get().add(form);
	}

	private HtmlLayoutContainer createLayout() {
		final TextField textField = new TextField();
		textField.setEmptyText("Empty Text");
		textField.addStyleName("gxtField"); // in the stylesheet
		
		FlexTemplate template = GWT.create(FlexTemplate.class);

		final HtmlLayoutContainer container = new HtmlLayoutContainer(template.getTemplate());

		container.add(textField, new HtmlData(".textField"));

		return container;
	}

}

Example: