This is the code snippet I have been working with:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
.cont{
}
.boxHolder{
display: inline-block;
}
.box{
width:100px;
height:100px;
background:black;
display:inline-block;
vertical-align:top;
}
</style>
</head>
<body>
<div class="cont">
<div class="ex2">
<div class = "boxHolder">
<div class = "box"></div>
<div class = "box"></div>
<div class = "box"></div>
</div>
</div>
</div>
</body>
</html>The challenge here is to make the .boxHolder element take on the combined width of its children, and align its children inline with each other. However, it appears to be inheriting the width of its parent container rather than behaving as an inline block within an overflow-hidden environment.
I have experimented with setting its position to absolute, but this did not yield the desired result either.
Update:
Here is a visual representation of how the layout should appear: https://i.sstatic.net/NaINw.png
Update 2:
The goal is to achieve this layout without utilizing flex properties.