防止 child div 溢出 parent div css/tailwindcss

Question

我有一个 div 有一个 child div。 child div 有几个输入字段嵌套在 html table 中（目前）。我的问题是 child div 上的输入字段溢出 parent 容器 div。

我的目标是让 child div 内容不会溢出 parent 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>

这里是问题的屏幕截图：

Answer 1

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

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

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

防止 child div 溢出 parent div css/tailwindcss

prevent child div to overflow parent div css/tailwindcss

html

css

tailwind-css