如何阻止子 div 超过父 div 的高度？-解网

问：

<div className='block justify-center flex flex-col h-screen py-8 px-48'>
    <div className='flex'>
        <Form />
    </div>
    <div className='flex-1'>
        <div className='shadow-md flex flex-col'>
            <div className='flex'>
                <div className='flex w-full py-2 px-2 bg-white border-0'>
                    <div className='flex-1'>
                        <Searchbar />
                    </div>
                    <div className='flex'>
                        <Button />
                    </div>
                </div>
            </div>
            <div className='overflow-auto flex-1'>
                <Table />
            </div>
        </div>
    </div>
</div>

这是我的 React 页面组件的样子（使用 Form、Searchbar、Button、Table 作为其他组件）。我的问题是 Table 元素超出了父块的高度，并且 overflow-auto 没有触发以将其包含在块边界内。

经过大量研究，我偶然发现使用 flex 和 flex-1 让项目占用父 div 的剩余空间。根据我（有限的）知识，我不明白我在这里拥有的 flex、flex-1、flex-col 设置如何导致表正确溢出，除非 flex 没有像我认为的那样工作。不幸的是，其他试图计算剩余孩子身高的答案似乎取决于这样一个事实，即其他孩子的大小是静态的，并且不像我那样弯曲。

老实说，我对 React 和 javascript 很陌生，所以任何帮助都是值得赞赏的。谢谢！

这就是它现在的样子，这就是我想要的样子。表格、表单和搜索栏/按钮组合的行为和外观也完全符合我的要求，除了当表格数据过多时，溢出不起作用，正如我所描述的

javascript html reactjs 尾风-css

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class='block justify-center flex flex-col h-screen py-8 px-48'>
  <div class='flex'>
    <Form>Form</Form>
  </div>
  <div class='flex flex-col flex-1 min-h-0'>
    <div class='shadow-md flex flex-col min-h-0'>
      <div class='flex'>
        <div class='flex w-full py-2 px-2 bg-white border-0'>
          <div class='flex-1'>
            <Searchbar>Searchbar</Searchbar>
          </div>
          <div class='flex'>
            <Button>Button</Button>
          </div>
        </div>
      </div>
      <div class='overflow-auto flex-1 min-h-0'>
        <Table class="h-[200vh]">Table</Table>
      </div>
    </div>
  </div>
</div>

如何阻止子 div 超过父 div 的高度？

How do I stop child divs from going beyond the height of a parent div?

评论

评论