The second div is not wider than the first div
I have this layout: https://postimg.org/image/74ioib3y7/
Rules of the game:
- The container must be at least 210px wide and 85px high
- Row1 should be able to grow as wide as needed and only wrap words when the container is sized like a container
- Row2 should be as wide as Row1 =>, it should wrap words and not stretch the container when the content of Row2 is wider than the content of Row1
I managed to do everything except 3.
EDIT: JSFiddle
IGNORe THIS MUST HAVE IT TO PASTE JSFiddle
Please, help
-2
source to share
1 answer
This should resolve your request:
.container {
display: inline-block;
background: aliceblue;
min-width: 210px;
min-height: 85px;
position: relative;
}
.maxim {
position: absolute;
width: 100%;
max-width: 100%;
background-color: lime;
}
<div class="container">
<header>
<strong>12345620</strong>
<span>description</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
<div class="container">
<header>
<strong>1234567890</strong>
<span>description and more text is here also possible</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
+1
source to share