防止子 div 溢出父 div css/tailwindcss答案

【问题标题】：prevent child div to overflow parent div css/tailwindcss防止子 div 溢出父 div css/tailwindcss
【发布时间】：2022-01-26 00:25:17
【问题描述】：

我有一个有子 div 的 div。这个子 div 有几个嵌套在 html 表中的输入字段（目前）。我的问题是子 div 上的输入字段溢出了父容器 div。

我的目标是拥有子 div，因此内容永远不会在不添加滚动条的情况下溢出父 div。我尝试了多个 'overflow-xx' 属性，但这只是隐藏了内容并添加了一个滚动条。

这是我的代码：

<div class="p-10 w-5/12 text-center">
  <div class="border-2 border-solid border-indigo-300 p-3 rounded shadow-2xl">
    <h2>Spielfeld 1</h2>
    <div class="h-96 border border-solid border-indigo-300 rounded flex">
      <div class="w-full">
        <table>
          <tr>
            <th>Name</th>
            <th>Runter</th>
            <th>Frei</th>
            <th>Hoch</th>
            <th>Neiba</th>
          </tr>
          <tr>
            <td>1</td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

这里是问题的截图：

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

您应该能够通过向您的 table 和 input 控件添加一些 CSS 来实现此目的。

将width: 100% 应用于故事和输入控件。然后您可以使用table-layout: fixed 和box-sizing: border-box 来调整容器内的控件和表格的大小。

/* ignore .w-full css - it's used to set the width for this demo */
.w-full {
  width: 600px;
  border: 1px solid green;
}

table {
  table-layout: fixed;
  width: 100%;
}

td input {      
  box-sizing: border-box;
  width: 100%;
}

<div class="p-10 w-5/12 text-center">
  <div class="border-2 border-solid border-indigo-300 p-3 rounded shadow-2xl">
    <h2>Spielfeld 1</h2>
    <div class="h-96 border border-solid border-indigo-300 rounded flex">
      <div class="w-full">
        <table>
          <tr>
            <th>Name</th>
            <th>Runter</th>
            <th>Frei</th>
            <th>Hoch</th>
            <th>Neiba</th>
          </tr>
          <tr>
            <td>1</td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
            <td><input type="text" name="" id="" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

【讨论】：