Not sure if flexbox is the correct way of going about this, but basically I am looking for a 2 column flexbox.
In the first part I want to put random text in and the width of this part will adapt and become the same size as the text (whatever the text is).
The second part is a dotted hr line, which I want it to basically take up whatever space is remaining on the right-hand side.
Then there'll be a 16px gap in between. Is this the correct way to go about it? Where am I going wrong?
Thanks for any help, much appreciated !
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
width: 100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}<div >
<div >
<div >
<div ><h2 >This is a title sentance</h2></div>
<div ><hr></div>
</div>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>CodePudding user response：
Remove width: 100%; on .h2-box and use either flex: none; or flex: 0 0 auto;.
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: center;
}
.h2-box {
flex: none;
/*flex: 0 0 auto;*/
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}<div >
<div >
<div >
<div ><h2 >This is a title sentance</h2></div>
<div ><hr></div>
</div>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>CodePudding user response：
I have another solution... Choose what is better!
You can remove the after your . You will have only the class .h2-box to make the style of your title.
After, you can use the styles for .h2-box :
flex-basis: content;
white-space: nowrap;
width:100%;
The CSS Flexbox property flex-basis lets you specify the desired initial size of a flex item before downsizing or redistributing the remaining space in their Flexbox container.
So you'll have :
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
flex-basis: content;
white-space: nowrap;
width:100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}<div >
<div >
<div >
<h2 >This is a title sentance</h2>
<div ><hr></div>
</div>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>CodePudding user response：
There are a couple of issue with the implementation. You are heading to the right direction but just need a little bit of a tweak
First of all, remove the width 100% on the h2-box and the dot box.
Add flex-grow: 1; to the dot box and you are good. This will force the element to span the rest of the remaining width.
I am not sure what is expected if your title is more than 1 line long but something to think about for you.
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
Not sure if you meant to set inline-flex, but display flex works just fine.
flex-direction defaults to row so this is not needed
flex-wrap defaults to nowrap so this is also not needed
I am also unsure where you want the dotted line with regards to the title on the left but you can align that vertically with ease using align-items. I have used this in the example below to align the dots to the bottom using align-items: flex-end;
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: flex;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: flex-end;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
flex-grow: 1;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}<div >
<div >
<div >
<div ><h2 >This is a title sentance</h2></div>
<div ><hr></div>
</div>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>