Height issue with segment inside to grid column

Question

I have a grid with 2 columns in it. In column one I have 1 raised segment, in column two I have 2 raised segments. Obviously, the second column will be larger. I need the segment in column one to take on full height. Any ideas?

Thanks!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />

<div class="ui padded grid">
  <div class="eight wide column">
    <div class="ui raised segment">
      <h3>Header 1</h3>
      <i>Select all that apply</i>
      <br />
      <br />
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id1" name="id1" value="1" tabindex="0" />
          <label>Information about widgets</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id2" name="id2" value="1" tabindex="0" />
          <label>Additional information about widgets</label>
        </div>
      </div>
    </div>
  </div>
  <div id="extraColumn" class="eight wide column">
    <div class="ui raised segment">
      <h3>Question 1</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" />
          <label>Include Sprockets</label>
        </div>
      </div>
    </div>
    <div class="ui raised segment">
      <h3>QUestion 2</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" />
          <label>Don't include sprockets</label>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Semantic UI used CSS Flexbox, and grid is declared in a way so that the heights of adjacent columns match. So all you need to do is make sure your left segment has a height of 100% to fill the full height of your column.

Result:

<div class="ui raised segment" style="height:100%;">

Snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="//oss.maxcdn.com/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />

<div class="ui padded grid">
  <div class="eight wide column">
    <div class="ui raised segment" style="height:100%;">
      <h3>Header 1</h3>
      <i>Select all that apply</i>
      <br />
      <br />
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id1" name="id1" value="1" tabindex="0" />
          <label>Information about widgets</label>
        </div>
      </div>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="id2" name="id2" value="1" tabindex="0" />
          <label>Additional information about widgets</label>
        </div>
      </div>
    </div>
  </div>
  <div id="extraColumn" class="eight wide column">
    <div class="ui raised segment">
      <h3>Question 1</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_1" name="content_1" value="1" tabindex="0" />
          <label>Include Sprockets</label>
        </div>
      </div>
    </div>
    <div class="ui raised segment">
      <h3>QUestion 2</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" id="content_2" name="content_2" value="1" tabindex="0" />
          <label>Don't include sprockets</label>
        </div>
      </div>
    </div>
  </div>
</div>