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

plupiseo 于 2023-11-18 发布在 React

关注(0)|答案(1)|浏览(180)

<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元素超过了父块的高度，并且溢出自动没有触发以保持它包含在块边界内。
经过大量的研究，我偶然发现使用flex和flex-1来让项目占用父div的剩余空间。据我（有限的）知识，我不明白我在这里的flex，flex-1，flex-col设置是如何不正确地导致表溢出的，除非flex不像我认为的那样工作。不幸的是，其他试图计算剩下的孩子身高的答案似乎取决于这样一个事实，即其他孩子的身高是固定的，不像我的孩子那样弯曲。
老实说，我对React和JavaScript都很陌生，所以任何帮助都很感激。谢谢！
表、表单和搜索栏/按钮组合体的行为和外观也完全符合我的要求，只是当表数据太多时，溢出不起作用，正如我所描述的

reactjs

来源：https://stackoverflow.com/questions/77489604/how-do-i-stop-child-divs-from-going-beyond-the-height-of-a-parent-div

1条答案

按热度按时间

vvppvyoh1#

你需要在.shadow-md元素的父元素上添加一个垂直的flex布局，这样它就可以被限制在父元素的高度上。此外，你需要将min-height: 0应用到<Table>的可压缩父元素上，以覆盖它们的默认min-height: min-content，这样它们就可以收缩了：

<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>

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

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

1条答案

相关问题

热门标签

最新问答