I have a DIV with display: block
(.out
).
In this DIV there is a flexbox with display: inline-flex
(.row
) that has
If i understand right, margin
or align-self
should do it:
align-self
https://jsfiddle.net/2ymx9oog/1/.out {
border: 1px solid red;
display: block;
position: fixed;
top: 0;
left: 0;
}
.row {
display: inline-flex;
flex-direction: row;
padding: 10px;
border: 1px solid yellow;
}
.infos {
border: 1px solid green;
flex-basis: 350px;
}
.dynamic {
border: 1px solid blue;
flex: 1 1;
align-self:flex-start
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
Lorem ipsum
margin-bottom
in this case https://jsfiddle.net/2ymx9oog/2/.out {
border: 1px solid red;
display: block;
position: fixed;
top: 0;
left: 0;
}
.row {
display: inline-flex;
flex-direction: row;
padding: 10px;
border: 1px solid yellow;
}
.infos {
border: 1px solid green;
flex-basis: 350px;
}
.dynamic {
border: 1px solid blue;
flex: 1 1;
margin-bottom: auto
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit a
Lorem ipsum
if it is about the width too, then remove the flex property : https://jsfiddle.net/2ymx9oog/4/
For both earlier example see results here :
margin
https://jsfiddle.net/2ymx9oog/3/align-self
https://jsfiddle.net/2ymx9oog/5/You can play with margin or align-self
example with margin:auto without flex values set https://jsfiddle.net/2ymx9oog/6/ set your dynamic box in the middle within the right area
You may set it at middle top, at middle middle, middle bottom, left top, left bottom, left middle, and so on