Prevent child div from inheriting parent width - html

I have a child div with a border that should only wrap as much as the text. However, it seems to inherit the parent div's width.
Example: https://jsfiddle.net/xstaf3cc/
<div class="contentContainer">
<div>Title</div>
<div>Posted by u/user1</div>
<div class="text">
Text
</div>
</div>
.contentContainer {
display: flex;
flex-direction: column;
margin-bottom: 15;
}
.text {
border: 1px solid black;
}
How can I make the width of 'Text' not inherit its parent div's width? I would like its width to just be as long as the text.


Use align-items: flex-start; style on contentContainer div
.contentContainer {
display: flex;
flex-direction: column;
margin-bottom: 15px;
align-items: flex-start;
}
.text {
border: 1px solid black;
}
<div>
<div class="contentContainer">
<div>
<div>Title</div>
<div>Posted by u/user1</div>
</div>
<span class="text">
Text
</span>
</div>
</div>


use width: fit-content; to .text
.contentContainer {
display: flex;
flex-direction: column;
margin-bottom: 15;
}
.text {
border: 1px solid black;
width: fit-content;
}
<div>
<div class="contentContainer">
<div>
<div>Title</div>
<div>Posted by u/user1</div>
</div>
<div class="text">
Text
</div>
</div>
</div>

Related

How to make bottom-border of two parallel divs align

I would like the lines at the bottom of each div/bottom border to align. When text on one side is longer than the other, the bottom border looks disjointed.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
border-bottom: 2px solid blue;
}
<div class="one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>

A height style can be applied to the <p> element if the content inside the <p> element is not dynamic.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
border-bottom: 2px solid blue;
}
p {
height: 50px;
}
<div class = "one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>

You could use an absolutely-positioned pseudo element to draw the border while maintaining the 90% width of innerTxt.
Because the flex elements are stretched vertically they'll be aligned at the bottom.
.one {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 5%;
}
.inner {
padding: 5px;
width: 100%;
}
.two {
padding: 5px;
}
.innerTxt {
width: 90%;
}
.one>* {
position: relative;
}
.one>*::after {
content: '';
position: absolute;
bottom: 0;
border-bottom: 2px solid blue;
display: block;
width: 90%;
}
<div class="one">
<div class="inner">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Wings</h4>
<p>Lorem Ipsum. This text is shorter</p>
</div>
</div>
<div class="two">
<img src="https://via.placeholder.com/370x236">
<div class="innerTxt">
<h4>Other</h4>
<p>Some other text on this page that happens to be longer than the previous</p>
</div>
</div>
</div>

try adding to the .inner div align-self: flex-end;
.inner{
align-self: flex-end;
}
or to the parent div :
.one {
align-items: flex-end;
}

How to create a flexbox layout?

i want to create a flexbox layout title, detail, and other content inside one div and a div with content close next to this div and should be placed in the center of the main box (named container).
What i have tried to do?
I created a div named container and placed title and other details inside it. In doing so, close div is also inside the div named container. It should be outside the container div and in middle of it.
I want to create a layout like in picture below,
Could someone help me solving this? link to code
https://codepen.io/anon/pen/BbaKwy
.box_wrapper {
width: calc(100% - 450px);
border: 1px solid green;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
<div>close</div></div></div>
Thanks.

You can achieve the desired result by moving the close div and adding a couple more styles to box_wrapper
.box_wrapper {
display: flex;
flex-direction: row;
align-items: center;
border: none;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
width: calc(100% - 450px);
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
</div>
<div>close</div>
adding the flex-direction:row to .box_wrapper is what aligns it to the right, and setting align-items:center is what positions it in the middle vertically.
EDIT:
If you want to achieve this while keeping the close div within the box_wrapper class, you can do so as follows:
.box_wrapper {
display: flex;
flex-direction: row;
border: none;
margin: 0 auto;
width: calc(100% - 450px);
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
padding: 10px;
}
.content {
border: 1px solid blue;
flex-grow: 1;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
<div>close</div>
</div>

Make div not expand parent

I searched for this problem for quite a while now, but only found solutions to the opposite problem.
So here is my problem:
I have a side panel that should be only as wide as its content. This panel has a header with a potentially long title. That header should not expand the panel, but instead be ellipsed.
The HTML looks similar to this
<div class="outer">
<div class="inner">
<div class="header">
superlongtextthatshouldbeellipsed
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>
This is the CSS to demonstrate the problem
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
white-space: nowrap;
overflow: none;
text-overflow: ellipsis;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
https://jsfiddle.net/1yn725hy/9/
In the fiddle the blue box should be as wide as the second purple box (+margin). The text in the green box should be ellipsed.
How do I do this?
EDIT: Just to clarify: The blue box should fit the content of the purple box which has a varying size. A fixed width does not solve the problem.

First of all your container has to have max-width or width fixed. Second of all your overflow has to be hidden instead of none:
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
white-space: nowrap;
max-width:200px;
overflow: hidden;
text-overflow: ellipsis;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
<div class="outer">
<div class="inner">
<div class="header">
superlongtextthatshouldbeellipsed
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>

Ok, finally solved it myself. The trick is to use the almighty flexbox and wrap the header in it:
.outer {
background-color: #FFAAAA;
display: flex;
flex-direction: row;
}
.inner {
background-color: #AAAAFF;
display: flex;
flex-direction: column;
margin: 5px;
}
.header {
margin: 5px;
background-color: #AAFFAA;
display: flex;
}
.header2 {
width: 0px;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.line {
margin: 5px;
background-color: #FFAAFF;
}
<div class="outer">
<div class="inner">
<div class="header">
<div class="header2">
superlongtextthatshouldbeellipsed
</div>
</div>
<div class="line">
short text
</div>
<div class="line">
even shorter text
</div>
</div>
</div>

You should add some width to your div. Otherwise the header text wont ellipsed, because there is no "end".
https://jsfiddle.net/1yn725hy/14/

Stretch height with flexbox align-items center

I have a div with display: flex; flex-direction: row;. The children of this div take the full height unless I specify align-items: center. Code below -
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
JSFiddle
What I want to achieve is that 2.1 and 2.2 should take 50px (50%) height and should have its content middle aligned vertically. They should also stretch the full available space horizontally (like width: auto or 100%). Then if 2.1 is not present, 2.2 should take 100px height and should be vertically aligned to middle.

You need to make row-items a flex box and apply align-items: center; to them
This is the code that you should add
.row1 .row-item {
display: flex;
align-items: center;
}
See result below :
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.row1 .row-item {
display: flex;
flex-wrap: wrap;
}
.row1 .row-item div {
width: 100%;
border: 1px solid blue;
display: flex;
align-items: center;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>

You can use line-height to achieve vertical alignment. In this case since your.row1 has a height of 100px add the following to that CSS: line-height: 100px; See the updated jsfiddle and for only .row1 see this jsfiddle

How to Right-align flex item?

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute?
.main {
display: flex;
}
.a,
.b,
.c {
background: #efefef;
border: 1px solid #999;
}
.b {
flex: 1;
text-align: center;
}
.c {
position: absolute;
right: 0;
}
<h2>With title</h2>
<div class="main">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="c">Contact</div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a">Home</div>
<!--<div class="b">Some title centered</div>-->
<div class="c">Contact</div>
</div>
http://jsfiddle.net/vqDK9/

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context).
.c {
margin-left: auto;
}
Updated fiddle:
.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<h2>With title</h2>
<div class="main">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="c">Contact</div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a">Home</div>
<!--<div class="b">Some title centered</div>-->
<div class="c">Contact</div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

Here you go. Set justify-content: space-between on the flex container.
.main {
display: flex;
justify-content: space-between;
}
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<h2>With title</h2>
<div class="main">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="c">Contact</div>
</div>
<h2>Without title</h2>
<div class="main">
<div class="a">Home</div>
<!-- <div class="b">Some title centered</div> -->
<div class="c">Contact</div>
</div>

You can also use a filler to fill the remaining space.
<div class="main">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="filler"></div>
<div class="c">Contact</div>
</div>
.filler{
flex-grow: 1;
}
I have updated the solution with 3 different versions. This because of the discussion of the validity of using an additional filler element. If you run the code snipped you see that all solutions do different things. For instance setting the filler class on item b will make this item fill the remaining space. This has the benefit that there is no 'dead' space that is not clickable.
<div class="mainfiller">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="filler"></div>
<div class="c">Contact</div>
</div>
<div class="mainfiller">
<div class="a">Home</div>
<div class="filler b">Some title centered</div>
<div class="c">Contact</div>
</div>
<div class="main">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="c">Contact</div>
</div>
<style>
.main { display: flex; justify-content: space-between; }
.mainfiller{display: flex;}
.filler{flex-grow:1; text-align:center}
.a, .b, .c { background: yellow; border: 1px solid #999; }
</style>

Or you could just use justify-content: flex-end
.main { display: flex; }
.c { justify-content: flex-end; }

If you want to use flexbox for this, you should be able to, by doing this (display: flex on the container, flex: 1 on the items, and text-align: right on .c):
.main { display: flex; }
.a, .b, .c {
background: #efefef;
border: 1px solid #999;
flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }
...or alternatively (even simpler), if the items don't need to meet, you can use justify-content: space-between on the container and remove the text-align rules completely:
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
Here's a demo on Codepen to allow you to quickly try the above.

As easy as
.main {
display: flex;
flex-direction:row-reverse;
}

margin-left: auto works well. But clean flex box solution would be space-between in the main class. Space between works well if there is two or more elements. I have added a solution for single element as well.
.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; padding: 0.25rem; margin: 0.25rem;}
.b { flex: 1; text-align: center; }
.c-wrapper {
display: flex;
flex: 1;
justify-content: flex-end;
}
.c-wrapper2 {
display: flex;
flex: 1;
flex-flow: row-reverse;
}
<div class="main">
<div class="a">Home</div>
<div class="b">Some title centered</div>
<div class="c">Contact</div>
</div>
<div class="main">
<div class="a">Home</div>
<div class="c">Contact</div>
</div>
<div class="main">
<div class="c-wrapper">
<a class="c" href="#">Contact</a>
<a class="c" href="#">Contact2</a>
</div>
</div>
<div class="main">
<div class="c-wrapper2">
<span class="c">Contact</span>
<span class="c">Contact2</span>
</div>
</div>

Add the following CSS class to your stylesheet:
.my-spacer {
flex: 1 1 auto;
}
Place an empty element between the element on the left and the element you wish to right-align:
<span class="my-spacer"></span>

If you need one item to be left aligned (like a header) but then multiple items right aligned (like 3 images), then you would do something like this:
h1 {
flex-basis: 100%; // forces this element to take up any remaining space
}
img {
margin: 0 5px; // small margin between images
height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}
Here's what that will look like (only relavent CSS was included in snippet above)

'justify-content: flex-end' worked within price box container.
.price-box {
justify-content: flex-end;
}

For those using Angular and Flex-Layout, use the following on the flex-item container:
<div fxLayout="row" fxLayoutAlign="flex-end">
See fxLayoutAlign docs here and the full fxLayout docs here.

I find that adding 'justify-content: flex-end' to the flex container solves the problem while 'justify-content: space-between' doesnt do anything.

Example code based on answer by TetraDev
Images on right:
* {
outline: .4px dashed red;
}
.main {
display: flex;
flex-direction: row;
align-items: center;
}
h1 {
flex-basis: 100%;
}
img {
margin: 0 5px;
height: 30px;
}
<div class="main">
<h1>Secure Payment</h1>
<img src="https://i.stack.imgur.com/i65gn.png">
<img src="https://i.stack.imgur.com/i65gn.png">
</div>
Images on left:
* {
outline: .4px dashed red;
}
.main {
display: flex;
flex-direction: row;
align-items: center;
}
h1 {
flex-basis: 100%;
text-align: right;
}
img {
margin: 0 5px;
height: 30px;
}
<div class="main">
<img src="https://i.stack.imgur.com/i65gn.png">
<img src="https://i.stack.imgur.com/i65gn.png">
<h1>Secure Payment</h1>
</div>