title: Chakra UI Table is it possible for a chakra UI component to have overflow x to have responsiveness?
body: <p>I have a Chakra UI Table that I want to have an overflow x when the whole table doesnt fit the screen anymore, can't seem to figure out how to put scroll left to right.</p>
  <pre><code>&lt;Table my={{ base: '1rem' }}&gt;
    &lt;Thead&gt;
      &lt;Tr&gt;
        &lt;Th&gt;Question&lt;/Th&gt;
        &lt;Th&gt;Answer&lt;/Th&gt;
        &lt;Th&gt;Action&lt;/Th&gt;
      &lt;/Tr&gt;
    &lt;/Thead&gt;
    &lt;Tbody&gt;
      {faqs.map(faq =&gt; (
        &lt;Tr key={faq._id}&gt;
          &lt;Td&gt;{faq.question}&lt;/Td&gt;
          &lt;Td&gt;{faq.answer}&lt;/Td&gt;
          &lt;Td width=&quot;15%&quot;&gt;
            &lt;ButtonGroup spacing=&quot;3&quot;&gt;
              &lt;Button
                colorScheme=&quot;blue&quot;
                onClick={() =&gt; modalOnOpenHandler(faq._id)}
              &gt;
                &lt;EditIcon /&gt;
              &lt;/Button&gt;
              &lt;Button
                colorScheme=&quot;red&quot;
                onClick={() =&gt; idDialogHandler(faq._id)}
              &gt;
                &lt;DeleteIcon /&gt;
              &lt;/Button&gt;
            &lt;/ButtonGroup&gt;
          &lt;/Td&gt;
        &lt;/Tr&gt;
  </code></pre>
  <p>The problem is that I have a flex parent for the sidebar menu and the content component that is why the scroll can't detect that it needs to be scrolled.</p>