We Keep Coding

Make CSS Max Width the width of an individual element?

I am trying to make a whole div's max width property the width of one element inside of it, how would I be able to do this? Or would I not be able to do this at all.
This is an example use case:
<div class="max-w-[610px]">
<div class="mt-12 mb-12">
<p class="mb-8">With RepoZoid, storing your own code is as easy as pie. Just add a new entry, paste your
code in - and you're off to the races.</p>
<p>It's as simple as 1, 2, 3 - with sharing options and more coming in the future!</p>
</div>
<div class="flex flex-row mb-3">
<div class="grow">
<input class="w-full text-[#9c9ea5] py-3 px-4 rounded-md" placeholder="Enter your email" type="email"
name="emailinput">
</div>
<div class="pl-2">
<button class="px-4 h-full rounded-md bg-[#6E6BFF] text-white">Sign Up to the Beta</button>
</div>
</div>

I'm not that familiar with Tailwind, but I'll give you a solution in Pure HTML/CSS.
.parent {
padding: 10px;
background: yellowgreen;
display: flex;
/* Add `flex-direction: column;` if you want each child to be in one-row */
width: fit-content;
}
.child {
width: 100px;
height: 50px;
}
.child:nth-child(1) {
background: red;
}
.child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
If you don't want to use fit-content, you can just use display: inline-block; and remove the width from your parent as follows:
.parent {
padding: 10px;
background: yellowgreen;
display: inline-block;
}
.child {
display: inline-block; /* Make it `display: block;` if you want each child to be in one-row */
width: 100px;
height: 50px;
}
.child:nth-child(1) {
background: red;
}
.child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
Additionally, I would quote a comment by #voneiden in a similar question;
A block element will claim the horizontal space that the parent has to offer whereas an inline-block will take the horizontal space it needs to display the content (unless overridden). If the inline-block is bigger than the parent, it will overflow. You can make a block element to evaluate content width by setting width: fit-content however that is not IE compatible.

.child element with class selected should be on top of other .child elements, each .child is inside .parent element with absolute position

Given the html and css below, is it possible to have a .child with class selected appear on top of other .child elements? I'd like if you can give an answer that would not change html structure and css position property of .child and .parent.
Also would be great to not toggle anything on parent, it is better to toggle child classes or styles, for parent it is better to set it once.
.parent {
position: absolute;
}
.child {
position: relative;
}
<div>
<div>
<div class="parent">
<div class="child selected"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
</div>
Greatly appreciate any input, thank you.

If you really want to stick to this HTML structure you could as example hide all elements (children) and show them only when they are selected.
A better solution would be having the selected class on the parent so then you could just simply give the selected parent a higher z-index.
Here you can find a snippet of how you can toggle the display without touching the HTML
// for demo purpuses
var toggleLayer = function() {
var next = $('.child.selected').removeClass('selected').closest('.parent').next();
var element = next.length ? next : $('.parent:first-child');
element.find('.child').addClass('selected')
}
.parent {
position: absolute;
}
.child {
position: relative;
display: none;
}
.selected {
display: block;
}
/* for demo purpuses */
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: red;
}
button {
position: fixed;
top: 120px;
left: 10px;
}
<div>
<div>
<div class="parent">
<div class="child selected">1</div>
</div>
<div class="parent">
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
</div>
<div class="parent">
<div class="child">4</div>
</div>
</div>
</div>
<!--- FOR DEMO PURPUSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>

How to divide the height of an element on 3 elements?

I have the following html code:
body, html {
height: 100%;
}
.parent {
width: 15%;
height: -webkit-fill-available
}
.child {
height: 33.33%
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I tried the display:table for "parent" & display:table-row for "child" , but it didn't work.
Is it possible to do it?

I suggest to use flexbox, and don't forget to set .parent to height:100%.
The main advantages of using flexbox:
You don't have to deal with overflow problem, say there is more content in one row that couldn't fit 1/3 of the entire container height, it will simply expand the row automatically, and all the remaining free space will still be evenly distributed.
You can easily add or remove a row without changing the CSS, they will be evenly distributed based on the number or child divs.
If you need one or more rows to be shorter or taller, you can just use flex or flex-grow or flex-basis to adjust accordingly.
Plus, if you haven't heard of flexbox yet, you'll be amazed how powerful it is once you entered the flexbox world.
html,
body {
height: 100%;
margin: 0;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
}
.child {
flex: 1;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

Apply height: 100%; and margin: 0; (to reset the default margin) to html and body, then 100% height for the parent and 33.33% for the children. No flex or table needed...
The main important thing is that the parent needs a defined height for the percentage values of the children to become effective. And if that parent height is a percentage value, also the parent of the parent needs a defined height. If you only use percentages, that goes up to body and html
body,
html {
height: 100%;
margin: 0;
}
.parent {
width: 15%;
height: 100%;
}
.child {
height: 33.33%;
background: #fa0;
}
.child:first-child {
background: #0fa;
}
.child:last-child {
background: #af0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Your code is working, just put min-width to see it in action.
<html>
<head>
<style>
.parent{
height:100%;
}
.child{
height:32%;
border:1px solid black;
min-width: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>

How can I make a container div the same width as it's floating children and center it when there are multiple rows of floating children?

I have a container div with multiple floating child divs. Each child has the same width, but the size of the row varies based on screen width. I want the container to only be the width of its children and also be centered, all dynamically depending on screen size. This post explains a similar problem:
Container div changes width when a second row of floating children is added
Here is a fiddle that also explains the issue:
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
http://jsfiddle.net/LxLjv3tm/1/
Here is another stackoverflow post that solves the issue for one row:
Having the floating children elements determine parent width
(the issue is there are enough floating children to make multiple rows)

It looks like jQuery is the answer. In order to "dynamically" set the width of the container div, we need to calculate the width on a screen resize event via jQuery. We can use the width of the window and the width of the children to calculate the width of the inner container.
Here is the fiddle:
var resizeContainerDiv = function() {
var screenWidth = $(window).width();
var childWidth = $(".child").outerWidth();
var innerContainerWidth = Math.floor(screenWidth / childWidth) * childWidth;
$('.container').css('width', innerContainerWidth);
}
$(window).on("load", resizeContainerDiv);
$(window).on("resize", resizeContainerDiv).resize();
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
https://jsfiddle.net/02arvnLx/1/

Resize divs related to parent divs with jQuery

So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>

I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.