I try to build an assignments list following a tutorial on laracast.com.
My problem is that a div in a flex container runs over the width of the parent container:
HTML-Code:
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full grid place-items-center bg-gray-800 text-white">
<section class="w-60">
<h2 class="font-bold mb-2">
Lorem Ipsum
<span>(3)</span>
</h2>
<ul class="border border-gray-600 divide-y divide-gray-600 mt-6">
<li>
<label class="p-2 flex justify-between items-center">
Foo
<input type="checkbox" class="ml-3">
</label>
</li>
<li>
<label class="p-2 flex justify-between items-center">
Bar
<input type="checkbox" class="ml-3">
</label>
</li>
<li>
<label class="p-2 flex justify-between items-center">
Foobar
<input type="checkbox" class="ml-3">
</label>
</li>
</ul>
<form>
<div class="border border-gray-600 text-black flex">
<input placeholder="new assignment" class="p-2">
<button type="submit" class="bg-white border-l p-2">Add</button>
</div>
</form>
</section>
</body>
</html>
It seems to be a problem with the padding of the two elements. If I remove the padding and add a flex-1 to the elements they are shrinked/grown to the desired width:
Unfortunately, then the text is glued to the right. How to solve this?